如何在FF 34. x中获得FF 33. x Flexbox行为？[重复]

Question

我们在桌面应用程序中大量使用flexbox，比如寻找网络应用程序，它一直运行良好。

但是在最新的火狐开发者版（35.0a2）中，布局并不像预期的那样（它会超出视口）：http://tinyurl.com/k6a8jde

这在Firefox33.1中运行良好。

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

但遗憾的是，我还没有找到一种方法来获得FF 33。FF 34或35中的x行为。十、

任何关于布局或如何更好地隔离问题的帮助都将不胜感激。

Answer 1

这些修复对我都不起作用，尽管它们起作用了。在我的例子中，我提供了一个显示：table-cell回退，它似乎正在接管。使用SASS，包括像这样，回退适用于IE而不影响FF：

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

Answer 2

比这更简单，只要给灵活的孩子

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

不使用minwidth:0hack

Answer 3

与此相关的差异是“flex项目的隐含最小尺寸”，这是flexbox规范中的一个新特性（或者更确切地说，是一个被删除并重新引入的特性）

恢复旧行为的最简单（最简单）的方法是添加以下样式规则：如果您担心水平flexbox中的溢出，请添加*{min-高：0}（或min-宽）；但它看起来像您的测试用例只有从垂直柔性容器溢出的问题）。

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

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

>

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

有一个高大的子代，您希望允许它溢出（它可能会由具有溢出：滚动的中间元素优雅地处理，就像这里的情况一样）

（在你的例子中，实际上有一堆嵌套的元素，因为你在许多嵌套的flex容器中有一个单独的高元素。所以，不幸的是，你可能需要min-high： 0一直向上。）

（如果您感到好奇，这个bug有更多信息