如何在flex列父容器中让grid元素占满剩余可用高度

flex: 1 仅对直接父级为flex容器的子元素生效。
当前.SceneWithHistory-Container嵌套在.Funnel-Container内部，根本不是.Module-Container这个纵向flex容器的直接子元素，设置的flex:1从一开始就没有进入正确的布局上下文，自然无法拿到剩余空间。
另外flex列布局存在默认隐形限制：所有纵向flex容器的直接子元素默认min-height: auto，会被内部内容撑高，哪怕设置了正确的flex属性，也会出现高度计算不符合预期的问题。

顺着DOM层级打通整条弹性高度分配链即可，不需要手动计算任何高度差值：

• 给.Module-Container的直接子元素.Funnel-Container补充3项规则：
  • flex: 1 1 auto：自动占满父容器扣除固定高度子元素后的所有剩余空间
  • min-height: 0：解除默认的内容最小高度限制，避免被内容撑破布局边界
  • grid-template-rows: 1fr：保留原有的单列grid布局，让内部grid子元素自动撑满容器高度
• 给.SceneWithHistory-Container补充1项规则：
  • min-height: 0：解除内容撑高限制，让它可以完全填满父级grid分配的空间

需要补充的样式代码：

.Funnel-Container {
  /* 原有样式保留，新增以下规则 */
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: 1fr;
}

.SceneWithHistory-Container {
  /* 原有样式保留，新增以下规则 */
  min-height: 0;
}

调整完成后，高度计算完全由浏览器布局引擎自动完成：

1. 固定300px高的.Module-Container作为布局边界
2. 设置了flex-shrink:0的.Module-SubmitFormButtons保持64px固定高度，不参与压缩
3. 浏览器自动计算父容器扣除按钮高度后的剩余空间，全部分配给.Funnel-Container
4. .Funnel-Container将自身获得的高度，通过grid的1fr规则全部分配给内部的.SceneWithHistory-Container

后续不管调整.Funnel-Container的间距、按钮的高度，整条分配链都会自动重新适配，完全不需要手动编写calc()公式计算高度。

内容的提问来源于stack exchange，提问作者WhoIsDT