嵌套flex-grow场景下overflow:auto失效问题求助

问题核心在于：当你把父容器中flex-grow:1的子元素设置为垂直flex容器时，flex容器默认的min-height: auto会让它自动适应内部内容的高度，而非严格遵守父容器分配的可用空间。这就导致内部设置了overflow-y:auto的元素永远不会出现溢出，自然无法触发滚动条。

修改方案 #

给中间的嵌套flex容器（即display:flex; flex-direction:column; flex-grow:1的div）添加min-height: 0或者height: 0，强制它限制在父容器分配的高度范围内。

修改后的代码示例 #

<div style="display:flex; flex-direction:column; height:300px">
  <div style="flex-grow:0">
    top flex-grow-0
  </div>

  <div style="display:flex; flex-direction:column; flex-grow:1; min-height: 0">

    <div style="flex-grow:1; overflow-y:auto">

      <div style="height:1200px">
        middle flex-grow-1
      </div>

    </div>
  </div>
  <div style="flex-grow:0">
    bottom flex-grow-0
  </div>
</div>

原理说明 #

垂直方向的flex容器默认min-height: auto，这意味着容器高度会被内部内容撑开，哪怕父容器已经通过flex-grow:1给它分配了固定可用空间。设置min-height:0会覆盖这个默认行为，让容器高度严格受限于父容器分配的空间，当内部内容高度超过该空间时，overflow-y:auto就会生效并显示滚动条。

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