带有溢出的弯曲儿童尊重父级在Chrome中的最大身高，而不是在Firefox中

Question

我有一个max-height的flexbox容器。 它有两个孩子，水平弯曲，其中一个有overflow: auto 。 在Chrome中，有溢出的孩子一旦达到容器的最大高度就停止生长并滚动。 在Firefox中，它溢出容器。

我正在开发针对最新的Chrome（目前为59），但必须支持Firefox 40+，因此我正在使用Firefox 40进行测试。作为参考，caniuse.com报告FF40 完全支持flexbox 。

这显然在较新的FF版本中正常工作，但在我正在使用的FF40中没有，所以对于那些无法访问较旧的FF的人，这里是我看到的行为的屏幕截图：

Firefox 40

Chrome 59

我可以通过消除左边的子flex-direction: column并在容器上设置flex-direction: column来解决这个问题，但遗憾的是我的实际应用程序需要左侧的内容并需要水平弯曲。

为什么跨浏览器存在差异？ 什么是跨浏览器解决方案，让溢出的孩子像Chrome一样停止增长？

 div { padding: 10px; } #container { border: 1px solid green; display: flex; max-height: 200px; } #left { border: 1px solid purple; flex: 1; } #right { border: 1px solid orange; flex: 3; overflow: auto; } 

 <div id="container"> <div id="left"> Left content </div> <div id="right"> I stop growing at 200px tall in Chrome, but not in Firefox <ul> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> </ul> </div> </div> 

Answer 1

为什么跨浏览器存在差异？

目前的行为（即flex项目确实尊重其父Flex容器上的最大尺寸限制）直到2014年才在规范中，这解释了为什么Firefox的行为最初与IE的行为相匹配。 这是IE团队首先在这里提出的 ，并在这里得到解决。 这也意味着Chrome的行为在技术上是偏离当时的规格，即使它是明智的。

该规范已经更新，以匹配Chrome的明智行为 ，使得IE和Firefox的原始行为不合规。 不幸的是，Firefox的实现直到今年才更新，因为Firefox 51的发布（甚至Microsoft Edge首先出现了新的行为），这就是为什么旧的行为仍然存在于Firefox 40中。这就是为什么我倾向于不依靠flexbox的兼容性表 - 三年前的事情比现在要稳定得多。

请参阅Bugzilla中的错误1000957 （也链接到Fx 51发行说明中）。

什么是跨浏览器解决方案，让溢出的孩子像Chrome一样停止增长？

正如您所发现的那样，在Flex项目而不是flex容器上设置max-height是您可以做的最好的事情，因为flex项目要么尊重，要么不尊重Flex容器上的宽度/高度限制。 请注意，Flex容器和弹性项目中有边框和填充，因此在确定Flex项目的适当max-height时，您必须考虑这些内容。