Unterschied zwischen Breite und Flex-Basis

Question

Ich habe Unterschiede im Verhalten zwischen width und flex-basis festgestellt, die ich nicht durch What are the differences between flex-basis and width? erklären kann.

.outer { 
 
    display: flex; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 
.middle { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.inner { 
 
    flex-basis: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
} 
 
.inner2 { 
 
    width: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner2"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div>

Here ist das Beispiel veranschaulicht das Problem, das ich habe. Ich erwarte, dass beide Zeilen gleich aussehen, aber bei Verwendung von flex-basis (Zeile 1) scheint der Flex-Container (.middle Element) die systeminterne Breite seines untergeordneten Elements (.inner) zu ignorieren und berücksichtigt nur den Text.

Dieser Unterschied kann in den neuesten Versionen von Chrome, FF und Safari (aber nicht in IE11/Edge) beobachtet werden.

Erläuterung: Ich frage nicht, warum IE11/Edge verhält sich so. Sein Verhalten (in diesem Fall) erscheint mir tatsächlich logisch. Ich frage, warum es in allen anderen Browsern Unterschiede gibt.

Update: Edge 13 verhält sich genau wie IE11.

Answer 1

Dies scheint ein Fehler zu sein. Ein Element, bei dem es sich sowohl um einen Flex-Container als auch um ein Flex-Element handelt, scheint die intrinsischen Abmessungen seiner untergeordneten Elemente zu ignorieren, wenn sie über flex-basis festgelegt werden, statt dessen die Breite/Höhe des Inhalts seiner untergeordneten Elemente zu messen. Es ist ironisch, dass IE11/Edge der einzige Browser ist, der dies korrekt implementiert.

Chromium bug tracker

Answer 2

Dies liegt daran, IE11 unterstützt flex anders (nur teilweise technisch unterstützen). IE 11 erfordert, dass eine Einheit zum dritten Argument hinzugefügt wird, die Eigenschaft flex-basis, siehe msdn documentation in der Quelle unten.

So Flex-Kurzschrift Deklarationen mit unitless Flex-Basis-Werte werden ignoriert.

Flex-Basis ist die Mindestbreite, die ein Container haben kann, dann wird er basierend auf Ihren anderen Regeln wachsen/schrumpfen. Breite muss nicht gleichzeitig mit flex- und flex-basis verwendet werden, da sie mit der X-Browser-Kompatibilität in Konflikt stehen.

Ich habe Ihren CodePen auch aktualisiert, um zu erklären. Sehen Sie hier: http://codepen.io/mattpark22/pen/wWqKpz

Jetzt können Sie sehen, wie unterschiedlich Browser umgehen flex mit:

flex-basis: 258px; 
width: 258px; 

ich auch

entfernt haben

display: flex; 

von .outer - dies auch einen Effekt hatte.

Quelle: http://caniuse.com/#search=flex-basis

Quelle: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

Quelle: https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx