柔性基礎自動和像素混合不按預期工作

Question

我想要2個div，一個設置寬度和一個自動寬度使用彈性盒。我的理解是，基於flex-based auto的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寬度的一個div和另一個使用flex的剩餘空間？

由於

Answer 1

flex-basis是Flexbox的屬性爲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>