Flex布局中overflow-y:auto未按预期生效的问题排查

这不是浏览器的问题，而是Flex布局的默认伸缩规则导致的：

Flex子元素的flex-shrink属性默认值为1，意味着当Flex容器空间不足时，子元素会被自动压缩以适应容器——哪怕你给子元素设置了固定的height。这就是总高度100px的子元素会被压缩进70px容器、无法触发滚动的核心原因。

正确的解决方式（无需改用min-height） #

你不需要替换height为min-height，只需修改Flex子元素的伸缩规则即可：

方法1：给子元素添加flex-shrink: 0 #

给每个子元素设置flex-shrink: 0，明确告诉Flex布局不要压缩该元素，这样子元素会保持设置的固定高度，当总高度超过容器时自动触发滚动。

修改后的代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Overflow demonstration</title>
  </head>
  <body>
    <div style="width: 100px; height: 70px; border: 2px solid black; display: flex; flex-direction: column; overflow-y: auto;">
      <div style="height: 20px; flex-shrink: 0; background-color: red;"></div>
      <div style="height: 20px; flex-shrink: 0; background-color: blue;"></div>
      <div style="height: 20px; flex-shrink: 0; background-color: green;"></div>
      <div style="height: 20px; flex-shrink: 0; background-color: yellow;"></div>
      <div style="height: 20px; flex-shrink: 0; background-color: purple;"></div>
    </div>
  </body>
</html>

方法2：统一设置子元素的flex属性 #

也可以用flex: 0 0 auto（等价于flex-grow:0; flex-shrink:0; flex-basis:auto），同样能固定子元素尺寸，避免被压缩。

为什么min-height能生效？ #

当你给子元素设置min-height时，Flex布局会将这个值视为子元素的最小高度下限——即使flex-shrink:1，也不会把元素压缩到低于min-height的尺寸。此时子元素总高度超过容器，自然触发滚动。但这种方式本质是利用了Flex布局对min-height的特殊处理，而非真正保留固定height的语义，所以用flex-shrink:0更贴合你对固定高度的需求。

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