flex布局如何避免容器内元素超出父容器高度且仅指定区域可滚动

你遇到的问题本质是flex项的默认min-height: auto规则导致的：flex布局中，纵向排列的flex容器的直接子项默认最小高度由内容决定，即使你给子项设置了flex:1，当子项内部内容高度超过flex分配的可用高度时，子项会被内容撑大，进而溢出外层根容器，导致整个页面出现滚动条，此时Item2的overflow: auto无法生效，因为它的父容器高度已经被撑大，不存在内容溢出。

可以实现，你只需要给承载Item1、Item2的中间flex容器添加min-height: 0属性即可，这是flex规范内置的属性调整，不属于额外的高度限制配置。

修正后的代码如下：

<div style="display: flex; flex-direction:column; height: 100vh;">
  <!-- 头部 -->
  <div>Hello Flex!</div>
  <!-- 中间容器添加min-height: 0 -->
  <div style="flex: 1; display: flex; min-height: 0;">
    <div style="flex: 1">
      1
    </div>
    <div style="flex: 1; overflow: auto">
      2<br>2<br>2<br>very long content, should be scrollable and NOT stretch parent.
      <!-- 再多内容也只会在当前容器内滚动 -->
    </div>
  </div>
</div>

• 当给纵向flex项设置min-height: 0后，flex项的最小高度不再由内容决定，会优先遵守flex容器分配的可用高度
• 此时中间容器的高度会被固定在根容器减去头部高度的剩余空间内，Item2的内容超出自身高度时，overflow: auto就会生效，仅Item2区域出现滚动条，不会撑高父容器，也不会导致整个页面滚动。

如果可以接受设置高度相关属性，也可以使用以下两种常用方案：

• 给中间容器设置height: 0，效果和min-height: 0完全一致
• 给Item2设置max-height: 100%，限制Item2的最大高度不超过父容器高度

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