Html 两个堆叠DIV的顶部DIV如何影响另一个&x27；s高度

正如标题所示，我有两个堆栈

s

它们被放置在覆盖整个页面的绝对位置的容器中。基本上，这两个

加在一起，也应该覆盖集装箱船的整个空间

另一个重要方面是这些

具有动态内容。底部的一个可以有很多内容，因此需要一个

溢出：auto

规则。最上面的一个也可以有动态内容，但它并不真的会失控。因此，我不想减少溢出

主要问题是：在不存在重叠风险的情况下，最上面的一个如何影响另一个的高度？（我更喜欢只使用CSS的解决方案，或者不需要JS像素值计算的解决方案）

以下两幅图片描述了我试图实现的最佳目标：

---

为了方便起见，这里还有一个JSfiddle:

这是一种

display:flex

处理得非常好的情况。更新您的小提琴：

注意，我很快写了这篇文章，所以它缺少了支持某些浏览器的浏览器前缀，但是小提琴在Chrome中应该可以正常工作

请确保在此处查看flexbox的“检查浏览器支持”：

---

如果可以将高度设置为div，则可以使用这样的示例

.top-area {
    background: red;
    overflow: hidden;
    height: 40%;
}

.bottom-area {
    overflow: auto;
    height: 60%;
}

---

从我所读到的内容来看，flexbox似乎是唯一可用的CSS解决方案。谢谢你的意见。