html - 溢出的 flex child 尊重 parent 在 Chrome 中的最大高度，而不是在 Firefox 中

Question

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

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

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

火狐 40

Chrome 59

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

为什么浏览器之间存在差异？有什么跨浏览器解决方案可以让溢出的 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 元素做尊重其父 flex 容器的最大大小限制)直到 2014 年才出现在规范中，这解释了为什么 Firefox 的行为最初与 IE 的行为相匹配。这是IE团队最先提出来的here ，并解决了here .这也意味着 Chrome 的行为在技术上偏离了当时的规范，即使它是明智的。

此规范已成为 updated to match Chrome's sensible behavior ，使 IE 和 Firefox 的原始行为不兼容。不幸的是，Firefox 的实现直到 今年 才随着 Firefox 51 的发布而更新。 (甚至 Microsoft Edge 也率先提供了新行为)，这就是为什么旧行为仍然存在于 Firefox 40 中的原因。这就是为什么我倾向于不依赖 flexbox 的兼容性表——事情太多了三年前不如现在稳定。

参见 bug 1000957在 Bugzilla 中(也链接到 Fx 51 发行说明中)。

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

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