Chrome浏览器v89-90 对特殊css组合展示效果不一致问题Chrome v90版本做了flex布局策略的调整??

背景

最近遇到一个很怪异的问题, 我们在一次项目最新迭代中,对页面容器css样式做了调整, 随后没多久一线业务方反馈页面看不到了; 通过排查,发现这个“看不见”现象只在 Chrome v89- 版本浏览器页面高度丢失,而在Chrome v90+浏览器展示的效果是正常的

Demo复现

写了一个demo复现这个问题,代码如下

<div id="root" style="height:100%">
    <div id="container" style="height:100%;display:flex;flex-direction: column;">
      <div id="page" style="height:0;flex:1;display: flex;">
        <div style="flex: 1;overflow: auto;">
          <div style="height:100vh;background:skyblue"> 测试页面</div>
        </div>
      </div>
    </div>
 </div>

现象为

Chrome v89- 版本

Chrome v90+ 版本

code沙盒地址 codesandbox.io/s/hungry-wo…

大家可以用最新版本的Chrome浏览器和 Pc版微信内置浏览器来复现这个问题;

pc微信浏览器版本内核

最后

现在好奇到底浏览器Chrome v90做了什么改动,导致出现这一现象,有大佬提议查看Chrome浏览器的commit记录,找了半天,没找到贴切的,各位社区大佬有兴趣可以研究一下,找到原因还请留言告知一下,不胜感激!