ein div mit Flex zu erhöhen, wenn ein anderer versteckt ist nicht auf Safari arbeiten

Ich habe folgen Code:ein div mit Flex zu erhöhen, wenn ein anderer versteckt ist nicht auf Safari arbeiten

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.toggleBlue = false; 
 
});

span { 
 
    cursor: pointer; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding: 10px; 
 
    background-color: grey; 
 
    margin-top: 10px; 
 
} 
 
.row { 
 
    width: 35%; 
 
} 
 
.first { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 
.second { 
 
    display: flex; 
 
} 
 
.toggle { 
 
    width: 80%; 
 
    background-color: blue; 
 
} 
 
.decrease { 
 
    width: 30px; 
 
    height: 20px; 
 
    background-color: yellow; 
 
} 
 
.noWidth { 
 
    width: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myController"> 
 
    <span ng-click="toggleBlue = !toggleBlue">TOGGLE BLUE BOX</span> 
 
    <div class="wrapper"> 
 
    <div class="row first"></div> 
 

 
    <div class="row second" ng-class="{noWidth: toggleBlue}"> 
 
     <div class="toggle" ng-if="!toggleBlue"></div> 
 
     <div class="decrease"></div> 
 
    </div> 
 
    </div> 
 
</body>

Als ich "TOGGLE BLUE BOX", auf den Text klicken Es sollte die blaue Box mit ng-if verstecken, erhöhen Sie die rote Box, um es mit flex: 1; zu füllen, und ändern Sie die Breite der gelben Box mit ng-class. Also sollte es einfach die blaue Box wechseln. Dies funktioniert gut auf Chrom. Aber wenn ich es auf einem iPad in einem Safari-Browser ausprobiere, entfernt es die blaue Box, erhöht aber nicht die rote. Auch die gelbe Box ist als nicht am Ende ist es hinter dem roten wie folgen aus:

Mein erwartetes Ergebnis ist das gleiche wie hier im Snippet. Wie kann ich das auf Safari beheben? Ich versuchte es mit flex: 1 1 auto; auf der Klasse .first im Fall von flex 1;, aber es hat nicht funktioniert. Irgendwelche Ideen?

Dank

Quelle

2016-07-28 MrBuggy

Warum verwenden Sie 'Breite: 35%;' für '.row'? – 3rdthemagical

Safari-Version? –

@ 3ththagical, weil ich 35% von Grau als Breite haben möchte ... Ich denke, das ist nicht der Fehler und nicht wirklich wichtig ... – MrBuggy

Okay ... Ich bin ein wenig in Bezug auf Ihren Code verwirrt. Sie definieren den Display-Flex, verwenden ihn aber nicht wirklich für alle untergeordneten Elemente. Ich habe das so gut wie möglich korrigiert, aber lassen Sie es mich wissen, wenn hier etwas los ist.

Auch wenn Sie neugierig sind, warum Safari ausflippte, ist es im Grunde genommen, dass Ihr CSS nicht den richtigen Standards folgt (nicht Flex für alle Kindersteuerungen definieren).

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.toggleBlue = false; 
 
});

span { 
 
    cursor: pointer; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    background-color: grey; 
 
    padding: 10px; 
 
    height: 25px; 
 
} 
 
.first { 
 
    flex: 1 1 35px; 
 
    background-color: red; 
 
} 
 
.second { 
 
    flex: 1 1 35px; 
 
    background-color: blue; 
 
} 
 
.third{ 
 
    flex: 0 0 35px; 
 
    background-color: yellow; 
 
} 
 
.noWidth { 
 
    flex: 0 0 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myController"> 
 
    <span ng-click="toggleBlue = !toggleBlue">TOGGLE BLUE BOX</span> 
 
    <div class="wrapper"> 
 
    <div class="first"></div> 
 
    <div class="second" ng-class="{noWidth: toggleBlue}"></div> 
 
    <div class="third"></div> 
 
    </div> 
 
</body>

Quelle

2016-07-28 08:08:57 k2snowman69

Hallo, nachdem ich das Div mit den Klassen entfernt habe .row.second es funktioniert, ohne etwas anderes zu ändern. Vielen Dank! – MrBuggy

@MrBuggy Ich würde immer noch sicherstellen, dass jedes Kindelement eines Elements, das 'display: flex' verwendet,' flex: 1 1 auto' oder etwas ähnliches hat. Wenn Sie das nicht tun, muss der Browser eine Reihe von seltsamen Backup-Szenarien verwenden, die möglicherweise nicht korrekt über den Browser funktionieren (wie Sie bemerkt haben). Für weitere Informationen hier ist ein tolles Tutorial von flexbox! https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – k2snowman69

Ja, ich benutze 'flex: 1 1 auto;' im Falle von 'flex: 1;' Ich habe es geändert. Danke Herr :) – MrBuggy

hinzugefügt

.decrease { 
    flex: 1 0; 
}

Quelle

2016-07-28 07:53:03

Hallo danke, aber es funktioniert immer noch nicht ... – MrBuggy

ich verstehe nicht, wie Ihr Code funktionieren muss, ist richtig ... ( –

sollte es wie im Schnipsel funktionieren ... Ich entferne das blaue und fülle es mit dem roten ... aber auf Safari es ist wie auf dem Bild unter dem Schnipsel, es entfernt die blaue, aber die rote füllt es nicht, es hat die gleiche Breite und die gelbe ist auch als nicht am Ende ist es hinter der roten ... Vergleichen Sie das Schnipsel und das Bild und du wirst es sehen .. – MrBuggy

ein div mit Flex zu erhöhen, wenn ein anderer versteckt ist nicht auf Safari arbeiten

Antwort

Verwandte Themen