javascript - 三个垂直堆叠的 Div，动态高度

Question

我想要三个垂直堆叠的 div。

第一个 div 在顶部，它的高度固定为 60px。

中间的 div 可能包含也可能不包含内容，它通常包含垂直大于它的内容，因此设置为 overflow: auto。无论它是否包含内容，它都必须消耗窗口高度减去第一个 div 的高度和最后一个 div 的高度的剩余部分。

最后一个 div 的最小高度为 40px。这个 div 接受用户输入，高度可以在 400px 到 400px 之间。当用户输入文本时，这个 div 会向上扩展，一旦达到最大高度，它就会滚动。

这是一个图表:

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|          ^|
|  Footer  ||
|          v|
+-----------+

随着第三个 div 的扩展，我无法让第二个(中间的 div)缩小。如果可能，我想在没有 js 的情况下完成此操作。

Answer 1

CSS Tricks: A guide to Flexbox结合最大高度。