Question

我们大量使用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行为的方法。

有关布局或如何更好地隔离问题的任何帮助表示赞赏。

Answer 1

相关的区别在于“弹性项目的隐含最小尺寸”，这是flexbox规范中的一项新功能。（或者更确切地说，删除并重新引入的功能）

恢复旧行为的最简单（最简单）方法是添加此样式规则：* { min-height:0 }（或min-width，如果您担心水平弹性框中的溢出;但它看起来像您的testcase只有垂直弹性容器溢出的问题。）

通过更改改进了小提琴： http://jsfiddle.net/yoL2otcr/1/

真的，你应该只需要在特定元素上设置min-height:0 - 特别是，你需要在每个元素上：

是“面向列”的弹性容器的孩子
有一个高大的后代，你想允许它溢出（这可能由一个带有“overflow：scroll”的中间元素优雅地处理，就像这里的情况一样）

（在你的情况下，实际上有一堆嵌套的这些元素，因为你在许多嵌套的flex容器中都有一个高元素。所以，不幸的是，你可能需要min-height:0一直向上。）< / p>

（如果您感到好奇，此错误会提供更多信息以及由于此规范更改而在网络上损坏的更多内容示例：https://bugzilla.mozilla.org/show_bug.cgi?id=1043520）

Answer 2

none of these fixes worked for me, even though they work. In my case, I was supplying a display: table-cell fallback, which seemed to be taking over. Using SASS, including it like this, the fallback works for IE without affecting FF:

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

Answer 3

比这更简单只需给flex孩子

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

不使用min-width: 0骇客

如何在FF 34.x中获得FF 33.x Flexbox行为？

3 个答案: