Flex容器垂直溢出两种配置场景的差异原因解析

代码示例 #

CSS代码 #

html {
  height: 50%;
}
body {
  height: 100%;
  margin: 0;
}
.container {
  border: 1px solid green;
  width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.item-1 {
  border: 1px solid blue;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.item-2 {
  border: 1px solid yellow;
  display: flex;
  flex-direction: column;
}

HTML代码 #

<div class="container">
  <div class="item-1">
    <div class="item-2">
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
      <span>Text</span>
    </div>
  </div>
</div>

问题场景 #

当.item-2内部内容高度超过.container的高度时，两种配置效果完全不同：

• 把min-height: 0和overflow: auto设置在.item-1上时，.container与.item-1高度一致，.item-2内容溢出时显示滚动条，符合预期。
• 若将这两个属性移至.item-2，.item-1会继承.item-2的高度并溢出.container，且无滚动条。

差异原因 #

第一种配置（属性在.item-1） #

.container是垂直方向的flex容器，默认情况下，flex子项（这里的.item-1）的min-height为auto，意味着子项高度会被内容撑开，不会小于内容高度。设置min-height: 0后，打破了这个默认限制，允许.item-1的高度被父容器.container的高度约束（即.item-1高度等于.container的高度）。

同时给.item-1加上overflow: auto，当.item-2的内容高度超过.item-1的高度时，.item-1就会触发滚动，把溢出的内容包裹在自身内部，不会撑破父容器.container。

第二种配置（属性在.item-2） #

此时.item-1作为.container的flex子项，依然保留默认的min-height: auto，它的高度会被内部的.item-2撑开——哪怕.item-2设置了overflow: auto，但.item-2的高度是由自身内容决定的（因为它的父项.item-1没有限制高度），所以.item-2的高度会和内容高度一致，不会触发滚动。

而.item-1因为min-height: auto，会跟着.item-2的高度被撑大，最终超出.container的高度，导致.container被撑破，自然也不会出现滚动条。

简单总结：flex子项默认不会被父容器的高度限制住，必须给子项设置min-height: 0才能让父容器的高度约束生效，再配合overflow属性才能让内部内容滚动。如果只给孙子元素设置overflow，父元素（flex子项）还是会被内容撑大，进而撑破顶层容器。

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