如何为高度未知的div设置overflow scroll滚动效果（纯CSS实现）

问题根因 #

你的overflow不生效是两个布局特性导致的：

• flex列布局下的子元素默认min-height为auto，会优先适配内容高度，不会被父容器的高度限制，导致外层的.container-fill直接被内部高元素撑开
• .container-fill没有设置配套的布局规则，内部的.c元素的高度参考值无效，overflow: scroll无法触发

修改方案（纯CSS实现） #

只需要调整两个类的样式即可：

/* 调整.container-fill的样式 */
.container-fill {
  width: 80%;
  border: 1px dashed black;
  flex: 1 1 auto;
  /* 新增下面三行 */
  display: flex;
  flex-flow: column;
  min-height: 0; /* 覆盖flex默认min-height: auto，限制容器高度不会被内容撑开 */
}

/* 调整.c的样式 */
.c {
  width: 100%;
  background-color: lightgreen;
  padding: 10px;
  box-sizing: border-box; /* 避免padding把宽度撑出容器 */
  overflow: auto; /* 替换scroll，没溢出的时候不显示冗余滚动条 */
  flex: 1 1 auto;
}

你原有代码中p选择器里的text-aling为拼写错误，修正为text-align: center即可。

最终效果 #

修改后：

1. .container-fill会准确填充main里除了.container-dynamic之外的剩余高度，不会被内容撑开
2. .c会填充.container-fill内部除了首行p标签之外的所有高度
3. 内部.b高度超过.c的容纳范围时，自动在.c区域内触发滚动，不会超出整个.page容器的高度

内容的提问来源于stack exchange，提问作者Nicolas Stadler