溢出：自动在 chrome 中无法正确滚动答案

【问题标题】：overflow: auto is not scrolling correctly in chrome溢出：自动在 chrome 中无法正确滚动
【发布时间】：2021-07-23 09:53:35
【问题描述】：

我有以下主从布局，我希望左蓝色列和黄色右列滚动。据我所知，我已经设置了一系列嵌套的 flexbox 来实现这种布局。这在 Safari 中运行良好，但不是 Chrome。请参阅CodeSandbox here。我错过了什么？

【问题讨论】：

您缺少高度限制。为了触发溢出，需要有一些东西溢出。如果没有固定或最大高度，元素只会根据内容大小扩展或收缩，并且永远不会生成滚动条，因为永远不会发生溢出情况。
但高度有限。页面容器受100vh 限制，每个嵌套的flex 容器使用flex: 1 扩展至剩余高度。这种技术在 Safari 中运行良好。我猜我缺少一个 Chrome 怪癖。
flex: 1 不是高度。这只是一个消耗剩余空间的命令。您需要在沿线某处设置flex-basis、height 或max-height。

【解决方案1】：

终于找到了解决办法。我的水平容器上已经有min-height: 0，但在父容器上也需要min-height: 0。它与弹性项目的自动最小大小有关（请参阅Flexbox Specifications）。 this article 也很有用。

【讨论】：