Question

我正在尝试使用2个div，一个具有设定宽度，另一个具有使用弹性框的自动宽度。我的理解是使用flex-basis 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。

如何将一个div设置为160px的宽度，另一个使用flex获取剩余空间？

由于

Answer 1

flex-basis是width的Flexbox属性（在默认行方向使用时），默认为auto，只是意味着按内容调整大小，类似于内联元素工作。

您应该使用flex-grow: 1，而不是flex-basis: auto。

＆＃13;

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

＆＃13;

flex-basis auto和px混合不按预期工作

1 个答案: