如何在FF 34.x中获得FF 33.x Flexbox行为？ [英] How can I get FF 33.x Flexbox behavior in FF 34.x?

问题描述

但是有了最新的Firefox开发版（35.0a2）的版本，布局不符合预期（它超出了视口）： http://tinyurl.com/k6a8jde

在Firefox 33.1中可以正常工作。

我认为这与这里描述的flexbox更改有关：
< a href =https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility> https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility a>

但遗憾的是，我还不知道如何在FF 34或35.x中获得FF 33.x的行为。
$ b

有关布局或如何更好地隔离问题的任何帮助，我们都非常感激。

相关的差异就是柔性项目的隐含最小尺寸，这是柔性的一个新特征x规格。 （或者说，被移除并重新引入的功能）

恢复旧行为最简单的方法是添加此样式规则：<$ c如果您担心在水平柔性盒中发生溢出，则可以使用 * {min-height：0} （或 min-width 看起来像你的测试用例只有一个从垂直柔性容器溢出麻烦）。

更新小提琴，有这样的变化：
http://jsfiddle.net/yoL2otcr/1/

真的，你只需要设置 min-height：0 关于特定元素 - 特别是，您需要每个元素：

1. 是面向列的容器的子元素




2. 有一个高大的后代，您希望允许溢出（这可能会被一个带有overflow：scroll的中间元素优雅地处理，就像这里的情况一样）

< （在你的情况下，那里实际上是一堆嵌套的这些元素，因为在许多嵌套的柔性容器中有一个单独的高元素。所以，不幸的是，你可能需要 min-height：0 >

再次好奇，这个错误有更多的信息和更多的内容的例子，由于这个规范的变化，在网络上被打破： https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 ）

We use flexbox heavily for an desktop application like looking web app and it has been working out great.

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

This works fine in Firefox 33.1.

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

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.

解决方案

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)

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).

Updated fiddle, with that change: http://jsfiddle.net/yoL2otcr/1/

Really, you should only need to set min-height:0 on specific elements -- in particular, you need it on each element that:

1. is a child of a 'column'-oriented flex container

2. 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)

(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.)

(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屋！