获取 flex-box 列以填充可用空间

Posted 2023-03-05

【中文标题】获取 flex-box 列以填充可用空间

【英文标题】：Getting flex-box column to fill available space

【发布时间】：2018-03-16 02:47:30

【问题描述】：

我一直在尝试让 css flex box 正常工作以填写列 flex box 中的项目。

基本上，我希望这段代码将两个 flex 部分均匀地隔开，每个部分占据可用高度的 50%。如果我手动将高度设置为 50% 它可以工作，但这似乎是不正确的解决方案，因为我认为这是设置 flex:1 应该做的。

我在这里阅读了指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 并尝试了各种 align-self、flex-grow、align-content 以查看它们是否可以修复它，但到目前为止我还没有运气。我确定我遗漏了一些简单的东西，但是我一直无法弄清楚，并且阅读有关堆栈溢出的其他问题似乎并不能帮助我弄清楚我做错了什么.

.flex 
  display: flex;


.flex1 
  flex: 1;


.col-flex 
  flex-flow: column nowrap;
  justify-content: space-evenly;

<div class="flex" style="height:200px">
  <div class="flex1">
    <div class="col-flex" style="height:100%;background-color:grey">
      <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div>
      <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div>
    </div>
  </div>
  <div class="flex1" style="background-color: red;">
    The flex on the row based flex works correctly;
  </div>
</div>

完整代码在这里：https://codepen.io/anon/pen/EwbLMM

【问题讨论】：

容器需要设置为display: flex

【参考方案1】：

让容器也成为一个flexbox。将display: flex 添加到col-flex - 请参见下面的演示：

.flex
  display:flex;


.flex1
  flex:1;


.col-flex
  display: flex; /* ADDED */
  flex-flow: column nowrap;
  justify-content: space-evenly;

<div class="flex" style="height:200px">
  <div class="flex1">
    <div class="col-flex" style="height:100%;background-color:grey"> 
      <div class="flex1" style="background-color:blue;flex-grow:1">I should be top half, you shouldn't see grey</div>
      <div class="flex1" style="background-color:green;flex-grow:1">I should be bottom half, you shouldn't see grey</div>
    </div>
  </div>
  <div class="flex1" style="background-color: red;">
    The flex on the row based flex works correctly;
  </div>
</div>