Html 在同级达到最小高度后填充父级的剩余高度

标题听起来相当棘手，我想，我想实现的是简单地填充父元素的剩余高度，下面是我得到的，HTML：

<div id="container">
    <div id="row1"></div>
    <div id="row2"></div>
</div>

---

当#row1达到最小高度并停止收缩#row2开始获得额外高度时，我如何让它在不使用javascript的情况下正确计算高度（并不是说我不能在其中编码，只是在本例中我的布局有一半是由javascript生成的，javascript会导致大量性能下降）。

您可以尝试使用

calc（）

#row2 {
  max-height: calc(100% - 30px);
  height: 90%;
}

具有柔性的解决方案：

#容器{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
宽度：100vw；
}
#第1行{
最小高度：30px；
身高：10%；
背景：红色；
}
#第2行{
弹性：10自动；
背景：绿色；
}

第1行
第2行

如果

#row1

的高度大于

最小高度怎么办？然后呢？Duuude，我一直在尝试flex布局（从零开始学习），尝试表格布局，浮动，搜索了半个互联网，甚至没有想过这个简单的解决方案，你不知道你帮了我多少忙，我怎么会如此盲目…谢谢@c-可以用框尺寸固定的：边框框；
#row2 {
  max-height: calc(100% - 30px);
  height: 90%;
}