Flexed child 与 parent 的 max-height 在 Chrome 中的溢出有关，而不是在 Firefox 中

Question

我有一个带有 max-height 的 flexbox 容器。它有两个children，水平弯曲，其中一个有overflow: auto。在 Chrome 中，溢出的 child 在到达容器的 max-height 时停止增长并滚动。在 Firefox 中，它会溢出容器。

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

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

火狐 40

Chrome 59

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

为什么浏览器之间存在差异？ cross-browser 允许溢出的 child 像在 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

Why the discrepancy across browsers?

当前的行为（即 flex 项目 do 遵守其父 flex 容器的最大大小限制）直到 2014 年才出现在规范中，这解释了为什么 Firefox 的行为最初与IE。这是IE团队最先提出来的here, and resolved here。这也意味着 Chrome 的行为在技术上偏离了当时的规范，即使它是明智的。

此规范已 updated to match Chrome's sensible behavior, making IE's and Firefox's original behavior non-compliant. Unfortunately, Firefox's implementation wasn't updated until this year with the release of Firefox 51（甚至 Microsoft Edge 首先附带了新行为），这就是旧行为在 Firefox 40 中仍然存在的原因。这就是为什么我倾向于不依赖 flexbox 的兼容性表——三年前情况远不如现在稳定。

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

What's the cross-browser solution to allow the child with overflow to stop growing as it does in Chrome?

如您所见，最好在弹性项目而不是弹性容器上设置 max-height，因为弹性项目要么遵守，要么不遵守 width/height 约束在他们的弹性容器上。请注意，弹性容器和弹性项目中存在边框和填充，因此在为弹性项目确定合适的 max-height 时，您必须考虑这些因素。

Flexed child 与 parent 的 max-height 在 Chrome 中的溢出有关，而不是在 Firefox 中

Flexed child with overflow respects parent's max-height in Chrome, not in Firefox

html

css

cross-browser

flexbox