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 {
  padding: 0;
  margin: 0;}.row {
  display: flex;
  flex-direction: column;
  min-height: 100vh;}.row > div:not(.flex) {
  background: #676EE0;}.flex {
  flex: 1;
  background: #67E079;}

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