如何让可滚动Flex容器的所有子元素占满容器高度？

要让可滚动Flex容器中的所有子元素都能自动占满容器高度，只需移除子元素的height: 100%设置，利用Flexbox默认的align-items: stretch特性即可。

修改后的CSS代码 #

.flex-container {
  display: flex;
  flex-direction: row;
  max-height: 200px;
  background: gray;
  overflow-y: auto;
}

.item1 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

.item2 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

原理说明 #

Flex容器默认的align-items: stretch会让所有子元素在垂直交叉轴上自动拉伸，匹配容器内最高子元素的高度。你之前设置的height: 100%会干扰这个默认行为——当容器高度由子元素内容决定时，height: 100%无法正确计算参考高度，导致内容较少的子元素无法被拉伸至容器高度。

如果需要让子元素高度固定为容器的max-height（200px），内容超出时在子元素内部滚动，可以给子元素添加height: 100%和overflow-y: auto：

.item1, .item2 {
  height: 100%;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

此设置下，两个子元素都会占满容器的200px高度，各自内容超出时内部滚动，容器不会出现滚动条。

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