flex-basis auto und px gemischt funktioniert nicht wie erwartet

Question

Ich versuche, 2 divs zu haben, eine mit einer festgelegten Breite und eine mit einer automatischen Breite mit flex box. Mein Verständnis ist, dass das div mit flex-basis Auto den verbleibenden Platz in der Reihe nehmen würde.

<div style="display:flex; flex-direction: row; height:160px; border:1px solid #00CC33"> 
 
    <div style="display:inline-block; flex-basis:auto; height:100%; border:1px solid #66BB33"></div> 
 
    <div style="display:inline-block; flex-basis:160px; height:100%; border:1px solid #66BB33;"></div> 
 
</div>

Das Beste ist, Sie einladen, diese fiddle zu überprüfen.

Wie der eine div bei 160px Breite und der andere den verbleibenden Platz mit flex nehmen?

Dank

Answer 1

flex-basis ist die Eigenschaft für Flexbox width (wenn sie in der Standardzeilenrichtung verwendet wird), ist der Standard auto und bedeutet einfach durch Inhalt, die Art wie eine Inline-Element Arbeit dimensioniert werden.

Sie sollten flex-grow: 1, nicht flex-basis: auto verwenden.

<div style="display:flex; flex-direction: row; height:160px; border:1px solid #00CC33"> 
 
    <div style="display:inline-block; flex-grow: 1; height:100%; border:1px solid #66BB33"></div> 
 
    <div style="display:inline-block; flex-basis:160px; height:100%; border:1px solid #66BB33;"></div> 
 
</div>