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

Question

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

我正在开发针对最新的Chrome(目前为59),但必须支持Firefox 40+,因此我正在使用Firefox 40进行测试.作为参考,caniuse.com报告FF40 完全支持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

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

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

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

请参阅Bugzilla中的错误1000957(也链接到Fx 51发行说明中).

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

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