html - 谷歌浏览器最新版本，73.0，网页应用溢出不再起作用

Question

最新版本的谷歌浏览器 73.0，web 应用程序中的溢出不再起作用，除非在容器上指定高度 100%。这是一个错误吗？

标签： htmlcssgoogle-chromescrolloverflow

Answer 1

我发现了这个关于这个问题的Chromium 错误报告线程。

有人建议在该线程上设置min-height: 0容器或max-height: 100%孩子，这将解决溢出问题。

供将来参考和其他用户参考，这里是重现问题的小提琴，从 Chromium 错误报告线程复制。

#container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.box {
  display: flex;
  flex-direction: column;
  flex: 1;
  
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.1);
}

<div id="container">
  <div class="box">
    <div>
         Box 1
    </div>
    <div class="box">
      <div class="box">
         Box 2 (Nested)    
      </div>
    </div>
  </div>
</div>