Chrome v90 flex 滚动错误答案

【问题标题】：Chrome v90 flex scroll bugChrome v90 flex 滚动错误
【发布时间】：2021-04-19 13:25:28
【问题描述】：

我们的一些用户报告说无法再在我们的网站上滚动。经过调试，我们发现Chrome v90 上的用户正在发生这种情况。 Chrome v89 似乎运行良好。

这似乎是由非常特定的 css 组合引起的，请参见下面的最小示例。您还可以在 jsfiddle 上找到一个工作示例。

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);
}

<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>

在上面的 sn-p 中，滚动工作（Windows 和 MacOS）：

版本 89.0.4389.114（官方构建）(x86_64)

在上面的 sn-p 中，滚动不起作用（Windows 和 MacOS）：

版本 90.0.4430.72（官方构建）(x86_64)

用 css 解决问题相对简单，但是我有兴趣找出滚动在 v90 上不再起作用的原因。 Chrome 到底发生了什么变化，导致它无法正常工作？他们是故意改变了什么还是这是一个错误？

【问题讨论】：

有什么可以滚动的？你有2000px 的空间和内容适合三行常规大小的文本（在大多数使用场景中小于 100 像素高）。你只想要一个滚动条吗？
2000px 带有漂亮渐变背景的空白空间应该是可滚动的，这样您就可以一直走到渐变的尽头。我想知道为什么这会在 chrome v89 及更低版本上滚动，而不再在 v90 上滚动。
测试你的标记和样式它看起来与 flex 容器如何计算它们的高度有关，显然 Chrome 90 已经改变了一些东西。很有趣。
可在 Chrome 90.0.4430.72 - MacOs 10.15.7 上重现。 Screen Recording

标签： javascript html css google-chrome

【解决方案1】：

现在看起来 column 和 row 创建了某种内联框来定义它的宽度。 row 与overflow-x 相同。你可以在这里找到 chrome 的变化：https://developer.chrome.com/blog/new-in-devtools-90/。正如您在下面的图片中看到的那样，它围绕其内容创建了一个 div。

【讨论】：

好发现！但是，如果我从#root 元素中删除flex: 1，滚动将再次起作用，但较小的“内联”框仍然存在。所以我不确定它是否与它有关。
嗯，这很奇怪。但我认为这绝对是一个错误，应该报告:)

【解决方案2】：

改变

弹性：1；

到

弹性：1 1 自动；

【讨论】：

"用 css 修复问题相对简单，但是我有兴趣找出为什么滚动在 v90 上不再起作用。' -- OP 已经知道如何修复这个，他正在寻找你的问题没有提供的解释。请看How to Answer。