flex-basis autoとpxが混在して期待通りに動作しない

Question

フレックスボックスを使用して2つのdiv、1つは設定幅、もう1つは自動幅で表示しようとしています。私の理解は、フレックスベースのオートでdivが行の残りのスペースを取ることです。

<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>

最高のは、あなたがこのfiddleをチェックアウトする招待することです。

160pxの幅で1つのdivを持ち、もう1つはflexを使用して残りのスペースを取る方法はありますか？ （デフォルトの行方向で使用される場合）

おかげ

Answer 1

flex-basisはwidthためのフレキシボックスプロパティで、デフォルトはautoあり、単に種類のインライン要素作業のような、コンテンツによって大きさを意味。

flex-grow: 1ではなく、flex-basis: autoを使用してください。

<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>