如何在Firefox 34.x中实现类似于Firefox 33.x的Flexbox行为？

Question

我们在类似桌面应用的Web应用程序中广泛使用flexbox，并且一直表现出色。

但是，在最新的Firefox Developer Edition（35.0a2）中，布局不像预期那样工作（它超出了视口）：http://tinyurl.com/k6a8jde

这在Firefox 33.1中运行良好。

我认为这与此处描述的flexbox更改有关： https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

但遗憾的是，我还没有找到在FF 34或35.x中获得FF 33.x行为的方法。

欢迎提供有关布局或如何更好地隔离问题的任何帮助。

- Timm

---

https://dev59.com/mVoV5IYBdhLWcg3wc-Ym - Michael Benjamin

Answer 1

相关区别在于"弹性项的最小尺寸隐含值"，这是flexbox规范中的一个新功能（或者说是被移除和重新引入的功能）。

恢复旧行为最简单（也最直接）的方法是添加这个样式规则：* { min-height:0 } （如果您担心水平flex容器的溢出，则为min-width；但是看起来您的测试用例只有垂直flex容器溢出问题）。

更新后的fiddle，请使用以下更改： http://jsfiddle.net/yoL2otcr/1/ 实际上，您只需要在特定元素上设置min-height:0——特别是，在每个具有以下特点的元素上需要设置它：

1. 是'列'-导向的flex容器的子元素 2. 有一个高的后代，您希望允许其溢出（这可能会由一个带有"overflow:scroll"的中间元素优雅地处理，就像这里的情况一样）

（在您的情况下，实际上有一堆嵌套的元素，因为您在许多嵌套的flex容器中只有一个高大的元素。因此，您可能需要一直使用min-height:0，不幸的是。）

（如果您感兴趣，此错误有更多信息和更多示例，说明由于这个规范变化而在web上破坏的内容：https://bugzilla.mozilla.org/show_bug.cgi?id=1043520）

- dholbert

---

感谢您提供的修复建议。我已经在Firefox 33和Firefox 35中获得了所需的行为，并且现在可以安心地找出问题的根本原因，并仅在绝对需要时使用它。 - Timm

我曾经遇到过一个类似的问题，即包含动态数量图像的一行 flex 项。这些图像以前可以缩放，但自从 Firefox 34 版本以后，它们就会溢出容器。在我的情况下，我还必须在 flex 项上设置 min-width:0。 - beardofprey

是的 - 这取决于 flex 容器的方向。对于 flex-direction:row（默认情况），您需要在其子元素上设置 min-width:0，以明确允许它们缩小到小于其最小内容大小。对于 flex-direction:column，您需要在其子元素上设置 min-height:0。（但一旦有疑问，设置 min-width 和 min-height 均为 0 应该没问题，只要这样做不会覆盖您在样式中其他地方设置并且依赖于 min-width 的值 - 这些属性传统上初始值为 0。） - dholbert

Answer 2

这很简单，只需给flex子元素设置

.flex-child {
  flex: 1;
  overflow: hidden;
}

不使用min-width: 0的技巧

- Maged Mohamed

Answer 3

这些解决方法都无法解决我的问题，尽管它们是有效的。在我的情况下，我提供了一个 display: table-cell 的备用方案，似乎它占据了主导地位。使用SASS时，可以像这样包含它，这样备用方案就可以在IE中正常工作而不影响FF：

flex: auto; // or whatever   
.ie & {
  display: table-cell;
}

- mlaroy