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

标签 html css cross-browser flexbox

我有一个带有 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 enter image description here

Chrome 59 enter image description here

我可以通过消除左边的 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>

最佳答案

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 时,您必须考虑到这些。

关于html - 溢出的 flex child 尊重 parent 在 Chrome 中的最大高度,而不是在 Firefox 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44684386/

相关文章:

html - 我的代码有什么问题 [CSS]

javascript - 如何在Javascript中使用子例程?

jquery - 点击跟踪位置

html - Safari 中的链接聚集在一起

javascript - 旧版 IE JavaScript 不支持 indexOf

javascript - Opera 隐藏行时不会卡住表

css - 放大和缩小后输入下降

javascript - Canvas 无法正确渲染 : Why?

javascript - button和body onclick事件同时触发

html - R Shiny Image没有填充/使用css在页面上拉伸(stretch)