html - 获取 flexbox 列以填充可用空间

Question

我一直在尝试让 css flex box 正确工作以填充 column flex box 中的元素。

基本上，我希望此代码将两个柔性件均匀分布，每个都占据可用高度的 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

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