Flexbox垂直填充可用空间

Question

Flexbox垂直填充可用空间

现在flexbox连续我都可以写

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div></div>

我希望实现相同但垂直，就像在这张图片上 目前的问题是，需要增长的div没有任何高度，因此两个内容相互低于。我希望我的第二个内容位于具有固定高度的父容器的底部！

我知道我可以通过将第二个内容定位为绝对来解决这个问题bottom: 0;但是我可以实现flexbox吗？

Answer 1

你只需要flex-direction: column在父和flex: 1中间div上使用。body,html&nbsp;{ &nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;margin:&nbsp;0;}.row&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-direction:&nbsp;column; &nbsp;&nbsp;min-height:&nbsp;100vh;}.row&nbsp;>&nbsp;div:not(.flex)&nbsp;{ &nbsp;&nbsp;background:&nbsp;#676EE0;}.flex&nbsp;{ &nbsp;&nbsp;flex:&nbsp;1; &nbsp;&nbsp;background:&nbsp;#67E079;}<div&nbsp;class="row"> &nbsp;&nbsp;<div>some&nbsp;content</div> &nbsp;&nbsp;<div&nbsp;class="flex"></div> &nbsp;&nbsp;<!--&nbsp;fills/grows&nbsp;available&nbsp;space&nbsp;--> &nbsp;&nbsp;<div>another&nbsp;content</div></div>