html - 子 DIV 用可滚动内容填充剩余高度

Question

我正在尝试设置一个菜单 div A，其下方有一个内容容器 div B。它们都嵌套在父 div C 中。当 div B 中的内容高于 div B 本身时，则需要在 div B 上显示一个滚动条。

.

我遇到的主要问题是 div A 的高度未知，并且可以在运行时通过 JavaScript 添加和删除内容时随时更改，我想要 div B 以填充剩余的父级高度，同时保持其内容的可滚动性。

我正在寻找一个纯 CSS 的解决方案，因为我正在处理的应用程序已经很重 JS，我希望避免添加更多的膨胀。

我的问题的简化版本: https://jsfiddle.net/uf3frdjv/

Answer 1

使用 flexbox 可以解决您的问题。

一个简单的例子:

.C {
  display: flex; /* this enables flex layout */
  flex-direction: column; /* child divs are placed in column */
  height: 300px; /* Parent container must have a fixed height */
}
.A {
  flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */
}
.B {
  flex: 1 1 auto; /* div B should fit the remaining space */
  overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */
}

有关实际示例，请参阅此 fiddle