Chrome v90版本Flex布局滚动失效问题：变更原因及是否为Bug问询

我刚好研究过这个Chrome v90的Flex滚动失效问题，来给你详细拆解：

我们团队收到用户反馈，网站的滚动操作在Chrome v90版本中完全失效，但在v89及其他主流浏览器里都能正常运行。经过调试定位，问题是由一组特定的Flex布局CSS组合触发的，和浏览器版本的布局计算逻辑变更直接相关。

最小复现示例 #

下面是能稳定触发问题的最小代码片段：

CSS代码 #

div { position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
body { display: flex; overflow: hidden; margin: 0; padding: 0; min-height: 100%; background-color: #FFFFFF; }
#container { flex: 1; max-height: 100%; }
#root { flex: 1; width: 100vw; height: 100vh; }
#scrollview { display: flex; overflow: scroll; width: 50%; height: 100%; }
#big { width: 100%; height: 2000px; background-image: linear-gradient(#FA0050, #000000); }

HTML代码 #

<div id="container">
 <div id="root">
 <div id="scrollview">
 <div id="big"> Scroll me!<br><br> I can scroll on chrome v89<br> I cannot scroll on chrome v90 </div>
 </div>
 </div>
</div>

版本测试结果 #

• ✅ 正常滚动版本：Chrome v89.0.4389.114（Windows & macOS 均测试通过）
• ❌ 滚动失效版本：Chrome v90.0.4430.72（Windows & macOS 均出现问题）

Chrome v90导致滚动失效的核心原因 #

这个问题源于Chrome v90对Flex容器内滚动元素的尺寸计算逻辑的调整，具体是针对flex-shrink: 0在嵌套Flex结构中的行为变更：

1. 背后的变更背景：Chrome团队在v90版本中试图修复一个Flexbox布局的一致性问题，让flex-shrink: 0的行为更贴合W3C规范。在v89及更早版本中，浏览器对嵌套Flex层级下的flex-shrink限制处理比较宽松，允许滚动容器的子元素（比如示例中的#big）正常撑开父容器的可滚动区域；但v90严格执行了flex-shrink: 0的定义——强制子元素不能被压缩，却错误地把这个限制传递给了滚动容器的内部溢出计算。

2. 你的代码为什么触发了问题：

   • 你给所有div都设置了flex-shrink: 0，这导致#scrollview的子元素#big不会被压缩，但Chrome v90在计算#scrollview的滚动区域时，错误地认为#big的高度不能超过#scrollview的视口高度，因此没有生成可滚动的溢出空间。
   • 多层嵌套的Flex结构（body→#container→#root→#scrollview）放大了这个计算错误，每一层Flex容器的尺寸限制都被flex-shrink: 0强制传递，最终让滚动容器完全识别不到内部元素的溢出。

是有意调整还是Bug？ #

这属于Chrome v90中的回归Bug（Regression），而非有意的规范调整：

• Chrome团队的初衷是优化Flexbox的行为一致性，但在实现过程中引入了滚动容器尺寸计算的逻辑错误。
• 后续发布的Chrome v91及更高版本已经修复了这个问题，你可以升级浏览器测试，滚动功能会恢复正常。

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