子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 */
}
.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 */
}

对于一个实例,请看这个小提琴