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

我们大量使用flexbox作为桌面应用程序,例如查看网络应用程序,并且一直在努力。

但是使用最新的Firefox开发版(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的行为。

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

相关的区别是“flex items的隐含最小尺寸”,这是flexbox spec中的一个新功能。 (或者说,一个被移除并重新引入的功能)

恢复旧行为最简单的方法就是添加这个样式规则: * { min-height:0 } (或者min-width ,如果您担心水平方向的flexbox溢出,但是看起来像只有testcase从垂直柔性容器溢出有问题)。

更新小提琴,随着更改: http : //jsfiddle.net/yoL2otcr/1/

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

  1. 是一个“面向列”的柔性容器的孩子

  2. 有一个高的后裔,你想允许溢出(这可能会被一个中间元素与“溢出:滚动”优雅地处理,如在这里的情况)

(就你而言,实际上这些元素是嵌套的,因为在许多嵌套的flex容器中有一个单独的高元素,所以,不幸的是你可能需要min-height:0

(如果您好奇,这个错误有更多的信息和更多的内容的例子,由于这个规范的变化,在网络上被打破: https : //bugzilla.mozilla.org/show_bug.cgi?id=1043520 )

这些修补程序都不适用于我,即使它们工作。 在我的情况下,我提供了一个display: table-cell后备,似乎正在接管。 使用SASS,包括这样的情况下,回退适用于IE浏览器,而不影响FF:

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