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

【问题标题】：The latest version of Google Chrome, 73.0, the overflow in web applications does not work anymore谷歌浏览器最新版本，73.0，网页应用溢出不再起作用
【发布时间】：2019-10-04 10:24:53
【问题描述】：

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

【问题讨论】：

support.google.com/chrome/thread/3101009?hl=en
stackoverflow.com/help/mcve
明确一点：如果您创建一个最小、完整且可验证的示例，这将非常有帮助，这样人们就可以回答您的问题。
更清楚一点：没有人知道您所说的“Web 应用程序溢出”是什么意思，以及它是如何“不再起作用”的。如果你能做一个MCVE 并告诉我们，那将是最好的，但如果不能，至少用你的话告诉我们。不要指望我们能读懂你的想法。

标签： html css google-chrome scroll overflow

【解决方案1】：

看起来是这样，有人已经写过。

https://support.google.com/chrome/thread/3101009?hl=en

【讨论】：

我已经在问题中作为评论提到，我需要解决方案。同样的事情在Firefox中工作

【解决方案2】：

关于这个问题我找到了this Chromium bug report thread。

有人在该线程上建议在容器上设置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>

【讨论】：