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

Question

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

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

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

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

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

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>