如何在动态高度的 flexbox 中进行 div 拉伸？

Question

我正在尝试使用 flexbox 进行堆叠布局。理想情况下，它看起来像这样：

其中底部（蓝色）div 是固定高度 250px 顶部 div 是 n-250 ，其中 n 是父容器的大小–in换句话说，顶部应该伸展以填满容器。

当我有容器高度时，我对如何执行此操作有一些想法，但我宁愿避免在运行时确定该变量。

这个问题已经以各种形式详细讨论过，但似乎没有一个解决这个简单的用例（例如， 这里 使用页眉/内容/页脚，但表面上不只是使用内容/页脚）。

我已经 使用示例设置了一个代码笔。

原文由 Brandon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为这是使用 flex-grow: 1; 回答您的问题。希望能帮助到你

https://jsfiddle.net/BradChelly/ck72re3a/

 .container {
  width: 100px;
  height: 150px;
  background: #444;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.box1 {
  width: 100%;
  background: steelblue;
  flex-grow: 1;
}
.box2 {
  height: 50px;
  width: 100%;
  background: indianred;
}

 <div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

原文由 Brad 发布，翻译遵循 CC BY-SA 3.0 许可协议