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

【问题标题】：How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]如何在 FF 34.x 中获得 FF 33.x Flexbox 行为？ [复制]
【发布时间】：2023-03-14 07:30:01
【问题描述】：

我们将 flexbox 大量用于桌面应用程序，例如外观 web 应用程序，并且效果很好。

但在最新的 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 行为的方法。

感谢任何有关布局或如何更好地隔离问题的帮助。

【问题讨论】：

stackoverflow.com/q/36247140/3597276

标签： css firefox flexbox

【解决方案1】：

相关的区别在于“隐含的 flex 项的最小大小”，这是 flexbox 规范中的一个新特性。（或者更确切地说，一个被删除并重新引入的功能）

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

更新了小提琴，进行了更改： http://jsfiddle.net/yoL2otcr/1/

真的，您应该只需要在特定元素上设置min-height:0——尤其是，您需要在每个元素上设置它：

是面向“列”的弹性容器的子项
有一个高大的后代，你想让它溢出（这可能会被一个带有“overflow:scroll”的中间元素优雅地处理，就像这里的情况一样）

（在你的例子中，实际上有一堆嵌套的这些元素，因为你在许多嵌套的 flex 容器中都有一个 tall 元素。所以，很遗憾，你可能需要min-height:0。）

（如果您很好奇，这个错误有更多信息和更多由于此规范更改而在网络上被破坏的内容示例：https://bugzilla.mozilla.org/show_bug.cgi?id=1043520）

【讨论】：

感谢您提出的修复建议。我能够在 FF 33 和 FF 35 中获得所需的行为，现在可以冷静地了解这一点，并仅在绝对需要的情况下切换到使用它。
我在一行包含动态数量的图像的弹性项目中遇到了类似的问题。图像用于缩放，但从 FF 34 开始，它们溢出了容器。就我而言，我还必须在弹性项目上设置min-width:0。
是的——这取决于你的弹性容器的方向。对于flex-direction:row（默认值），您需要在其子级上设置min-width:0，以明确允许它们缩小到其最小内容大小以下。对于flex-direction:column，您需要在其子代上使用min-height:0。（不过，如果有疑问，将 min-width 和 min-height 都设置为 0 应该没问题，只要这样做不会影响您在样式中其他地方设置的 min-width 值并依赖于 - - 这些属性的初始值通常为 0。）

【解决方案2】：

比这更简单只需给 flex 孩子

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

不使用min-width: 0 hack

【讨论】：

【解决方案3】：

这些修复都没有对我有用，即使它们有效。就我而言，我提供了一个display: table-cell 后备，似乎正在接管。使用 SASS，包括它这样，回退适用于 IE 而不会影响 FF：

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

【讨论】：