flex-shrink Verhalten in verschiedenen Browsern

Aus was ich von der Flexbox-Definition bekomme, sollen Elemente in einem Flex-Container, proportional zu ihrem Flex-Shrink-Wert (Standard 1, so dass nicht explizit festgelegt werden muss), einmal schrumpfen der Behälter wird zu eng.flex-shrink Verhalten in verschiedenen Browsern

Dies funktioniert in Firefox (nicht zu kümmern, dass das Seitenverhältnis geschraubt wird - die behoben werden können):

jedoch in anderen Browsern (nämlich Chrome, IE und Kante), die Elemente fließen nur über den Rand des Behälters:

ich verschiedene Werte für flex-Basis habe versucht Einstellung und flex-schrumpfen, keine Ergebnisse.

Wie bekomme ich alle Browser zum Schrumpfen von Elementen, wenn der umgebende Container zu klein wird?

bearbeitet: box-sizing: border-box; Einstellung das Problem nicht lösen, es drückt nur das fünfte Element aus, so dass es gar nicht mehr sichtbar ist, scheinbar das Problem zu lösen (aber nicht wirklich, da alle Elemente sichtbar sein müssen):

Reduced Beispiel, das die obigen Ergebnissen führt:

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.flexbox { 
 
    display: flex; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    max-width: 450px; 
 
    overflow: hidden; 
 
} 
 

 
.flex-item { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
}

<div class="flexbox"> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
</div>

Quelle

2016-07-20 mvuajua

standardmäßig hinzufügen, ein flex Element kann nicht als die Größe ihres Inhalts kleiner sein. Die anfängliche Einstellung für Flex-Elemente ist "min-width: auto". Sie müssen dies mit 'min-width: 0' überschreiben. https://jsfiddle.net/74sm5dw7/ –

@Michael_B perfekt - wie kommt das funktioniert in FF? – mvuajua

Firefox respektiert normalerweise 'min-width: auto'. Es könnte sein, dass in diesem Fall, weil die Flex-Elemente Platzhalterbilder sind, das Browserverhalten variiert. Bei anderen Inhalten als diesen Bildern funktioniert die Mindestgröße auch in FF. https://jsfiddle.net/74sm5dw7/1 –

Boxgröße hinzufügen: border-box; zu Ihrer .flexbox-Klasse.

.flexbox { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    max-width: 450px; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 

 
.flex-item { 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
}

<div class="flexbox"> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
    <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" /> 
 
</div>

Quelle

2016-07-20 12:40:34 San

Dies drückt nur das fünfte Element vollständig aus dem Container, so scheint es behoben, obwohl es nur ein Element fehlt jetzt vollständig. Ich habe die Frage mit einem aktualisierten Codebeispiel angepasst, das dies berücksichtigt. – mvuajua

Bitte versuchen Sie es

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

Quelle

2016-07-20 12:43:55 vignesh

Dies drückt nur das fünfte Element vollständig aus dem Container, so scheint es behoben, obwohl nur ein Element jetzt vollständig fehlt. Ich habe die Frage mit einem aktualisierten Codebeispiel angepasst, das dies berücksichtigt. – mvuajua

flex-shrink Verhalten in verschiedenen Browsern

Antwort

Verwandte Themen