带有溢出的弯曲孩子在 Chrome 中尊重父母的最大高度，而不是在 Firefox 中

Question

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

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

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

Firefox 40

Chrome 59

我可以通过消除左侧的孩子并在容器上设置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

为什么会出现跨浏览器的差异？

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

该规范此后一直是updated to match Chrome's sensible behavior，这使得 IE 和 Firefox 的原始行为不兼容。不幸的是，Firefox 的实现直到今年随着 Firefox 51 的发布（甚至 Microsoft Edge 首次发布新行为）才更新，这就是旧行为的原因仍然存在于 Firefox 40 中。这就是为什么我倾向于不依赖 flexbox 的兼容性表的原因——三年前的情况远不如现在稳定。

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

有什么跨浏览器解决方案可以让溢出的孩子像在 Chrome 中一样停止增长？

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