javascript - Chrome v90 flex 滚动错误

Question

我们的一些用户报告说无法再在我们的网站上滚动。调试后，我们发现这发生在 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>

在上面的代码段中，滚动有效(Windows 和 MacOS):

版本 89.0.4389.114(官方版本)(x86_64)

在上面的代码段中，滚动不起作用(Windows 和 MacOS):

版本 90.0.4430.72(官方版本)(x86_64)

用 css 解决这个问题相对简单，但是我有兴趣找出为什么滚动不再适用于 v90。 Chrome 究竟发生了哪些变化，使其无法正常工作？他们是故意改变了什么还是这是一个错误？

Answer 1

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