Inline-flex Behälterbreite nicht wachsen

Question

Betrachten Sie das folgende Layout:

<div class="div"> 
    <span class="span1">test</span> 
    <span class="span2">test test test test test</span> 
</div> 

und die CSS:

.div{ 
    display:inline-flex; 
    background-color:lightgray; 
} 
.span1{ 
    flex:0 0 100px; 
} 
.span2{ 
    white-space:nowrap; 
} 

Warum ist nicht die div gestreckt breit genug, um die beiden Spannweiten zu decken? Dies geschieht in FF und Chrome. Hier ist die Geige https://jsfiddle.net/p18h0jxt/

PS In IE 11/Kanten funktioniert es (zu arbeiten, wie ich es erwarten würde): Es funktioniert überall, wenn ich die folgende Art verwendet:

.span1{ 
    flex:0 0 auto; 
    width:100px; 
} 

Dank.

Answer 1

Von this SO answer:

Bug alle gängigen Browser zu beeinflussen, außer IE 11 & Rand:

So wie Sie gesagt haben - offenbar flex-basis nicht in einem verschachtelten flex Container eingehalten werden.

So kann Ihre 100px Flex-Basis von flex: 0 0 100px; nicht richtig funktionieren (außer ironisch in IE 11 & Edge).

Die Abhilfemaßnahme (erwähnt here auch) ist width statt flex-basis wie so zu verwenden:

.div { 
 
    display: inline-flex; 
 
    background-color: lightgray; 
 
} 
 

 
.span1 { 
 
    width: 100px; 
 
} 
 

 
.span2 { 
 
    white-space: nowrap; 
 
}

<div class="div"> 
 
    <span class="span1">test</span> 
 
    <span class="span2">test test test test test</span> 
 
</div>

Sie flex statt inline-flex verwenden könnte, aber dann wird Ihr div wie gemacht werden ein Blockelement, dh es wird die volle verfügbare Breite einnehmen, anstatt auf Ihren Inhalt beschränkt zu sein.

Ich nehme an, Sie verwenden inline-flex, so dass der Hintergrund auf den Inhalt beschränkt bleibt.

Answer 2

Die 100px beziehen Sie sich in Ihrem aktuellen Beispiel bezieht sich auf flex-basis nicht die Elementbreite.