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

Question

这个问题已经有答案了:

Why don't flex items shrink past content size? (7 个回答)

已关闭 2 年前。

我们在桌面应用程序(例如 Web 应用程序)中大量使用 Flexbox，而且效果非常好。

但是在最新的 Firefox 开发者版本 (35.0a2) 中，布局的行为并不符合预期(它超出了视口(viewport)):http://tinyurl.com/k6a8jde

这在 Firefox 33.1 中运行良好。

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

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

任何有关布局或如何更好地隔离问题的帮助都将受到赞赏。

Answer 1

相关的区别是“flex 元素的隐含最小尺寸”，这是 flex 盒规范中的一个新功能。 (或者更确切地说，删除并重新引入的功能)

恢复旧行为的最简单(最直接)的方法是添加此样式规则:* { min-height:0 }(或min-width，如果您担心水平 flex 盒中的溢出；但看起来您的测试用例仅在垂直 flex 容器中存在溢出问题)。

更新了 fiddle ，进行了更改: http://jsfiddle.net/yoL2otcr/1/

实际上，您应该只需要在特定元素上设置 min-height:0 - 特别是，您需要在以下每个元素上设置它:

1. 是面向“列”的 flex 容器的子容器

2. 有一个很高的后代，您希望允许它溢出(这可能会由带有“overflow:scroll”的中间元素优雅地处理，就像这里的情况一样)

(在你的例子中，实际上有一堆这些元素的嵌套，因为你在许多嵌套的 flex 容器中有一个高元素。所以，你可能需要 min-height:0 所有不幸的是，一路上升。)

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