如何让child元素占满设min-height的父元素高度 溢出时显示滚动条

浏览器计算百分比高度时，只会以父元素显式声明的固定height值作为计算基准，单独给父元素设置min-height属于弹性范围约束，不会被识别为有效的百分比高度参照，因此子元素设置的height: 100%会失效，既没法撑满父元素的最小高度，也无法正确触发溢出滚动。

以下方案都能满足「子元素完全占满父元素可用高度、内容溢出时自动显示滚动条」的需求，按适配场景选择即可：

• 方案1：Flex布局（优先推荐，适配所有现代浏览器，无硬编码问题）

.parent {
  min-height: 200px;
  background-color: tomato;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.child {
  background-color: green;
  color: #fff;
  flex: 1;
  overflow: auto;
}

这个方案下父元素高度会随内容自动适配：当内容高度不足200px时父元素保持200px高度，子元素自动撑满；当内容高度超过200px时父元素会同步增高，子元素始终占满父元素全高，内容超出子元素范围时自动出现滚动条。

• 方案2：Grid布局（代码最简洁）
  不需要给子元素设置任何高度相关属性，Grid默认会让单列网格内的子元素占满全高：

.parent {
  min-height: 200px;
  background-color: tomato;
  width: 100%;
  display: grid;
}

.child {
  background-color: green;
  color: #fff;
  overflow: auto;
}

• 方案3：传统盒模型兼容写法（适配IE等老旧浏览器）
  不需要改动布局模式，通过给父元素补充高度约束让百分比高度生效：

.parent {
  min-height: 200px;
  background-color: tomato;
  width: 100%;
  height: 0;
  height: auto !important;
}

.child {
  background-color: green;
  color: #fff;
  height: 100%;
  overflow: auto;
}

注意：不要给子元素设置overflow: scroll，该属性会无论内容是否溢出都强制显示滚动条；用overflow: auto只会在内容溢出时才展示滚动条，交互体验更好。

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