如何在 FF 34.x 中获得 FF 33.x Flexbox 行为? [英] How can I get FF 33.x Flexbox behavior in FF 34.x?
问题描述
我们将 flexbox 大量用于桌面应用程序，例如外观 Web 应用程序，并且效果很好.
We use flexbox heavily for an desktop application like looking web app and it has been working out great.
但是在最新的 Firefox 开发者版 (35.0a2) 中，布局的行为不像预期的那样(它超出了视口):http://tinyurl.com/k6a8jde
But with the latest Firefox Developer Edition (35.0a2) the layout does not behave as expected (it grows beyond the viewport): http://tinyurl.com/k6a8jde
这在 Firefox 33.1 中运行良好.
This works fine in Firefox 33.1.
我认为这与此处描述的 flexbox 更改有关:https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
I would assume this has something to do with the flexbox changes described here: https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
但遗憾的是，我还没有找到在 FF 34 或 35.x 中获得 FF 33.x 行为的方法.
But sadly I can't yet figure out a way to get the FF 33.x behavior in FF 34 or 35.x.
任何有关布局或如何更好地隔离问题的帮助表示赞赏.
Any help regarding the layout or how to better isolate the problem is appreciated.
推荐答案
相关的区别在于弹性项目的隐含最小尺寸"，这是 flexbox 规范中的一个新特性.(或者更确切地说，一个被删除并重新引入的功能)
The relevant difference there is the "implied minimum size of flex items", a new feature in the flexbox spec. (or rather, a feature that was removed and re-introduced)
恢复旧行为的最简单(最直接)的方法是添加此样式规则:* { min-height:0 }(或 min-width，如果您担心水平 flexbox 中的溢出；但看起来您的测试用例只有垂直 flex 容器溢出的问题).
The simplest (bluntest) way to restore the old behavior is to add this style rule: * { min-height:0 } (or min-width, if you were concerned about overflow in a horizontal flexbox; but it looks like your testcase only has trouble with overflow from a vertical flex container).
更新的小提琴，有这样的变化:http://jsfiddle.net/yoL2otcr/1/
Updated fiddle, with that change: http://jsfiddle.net/yoL2otcr/1/
实际上，您应该只需要在特定元素上设置 min-height:0 —— 特别是，您需要在每个元素上设置它:
Really, you should only need to set min-height:0 on specific elements -- in particular, you need it on each element that:
是面向列"的弹性容器的子项
is a child of a 'column'-oriented flex container
有一个高大的后代，你想允许它溢出(这可能会被一个带有overflow:scroll"的中间元素优雅地处理，就像这里的情况一样)
has a tall descendant, which you want to allow to overflow (which will perhaps be handled gracefully by an intermediate element with "overflow:scroll", as is the case here)
(在您的情况下，实际上有一堆这些元素嵌套，因为您在许多嵌套的 flex 容器中有一个高元素.因此，您可能需要 min-height:0 所有不幸的是，向上.)
(In your case, there's actually a nested pile of these elements, since you have a single tall element inside of many nested flex containers. So, you likely need min-height:0 all the way up, unfortunately.)
(如果你很好奇，这个错误有更多信息和更多由于这个规范更改而在网络上被破坏的内容示例:https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )
(If you're curious, this bug has more information & more examples of content that was broken on the web due to this spec-change: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )
这篇关于如何在 FF 34.x 中获得 FF 33.x Flexbox 行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
