为什么我的 Flexbox 布局在 Firefox 33.x 和 34.x 之间发生变化？

FF 34.x Flexbox 与 FF 33.x 行为的差异

Firefox 34.x 或 35.x 的用户观察到意外的 Flexbox与 Firefox 33.1 相比的行为。这种差异归因于 Flexbox 规范中引入的更改，主要是添加了“Flex 项目的隐含最小大小”。

解决问题

恢复行为Firefox 33.x 在 Firefox 34.x 中，最简单的解决方案是应用以下 CSS 样式规则：

• { min-height:0 }

这将覆盖“隐含的最小尺寸”并防止布局增长超出视口。

具体用例

在原来的场景中，出现了布局问题由于面向“列”的弹性容器内元素的特定组合。为了确保正确的行为，必须满足以下条件：

• 将 min-height:0 添加到每个子元素：

  • 是 a 的后代以“列”为导向的弹性容器
  • 包含一个高后代，需要Overflow

在像原始场景这样的情况下，有多个嵌套的 Flex 容器，可能需要对所有嵌套元素应用 min-height:0。

以上是为什么我的 Flexbox 布局在 Firefox 33.x 和 34.x 之间发生变化？的详细内容。更多信息请关注PHP中文网其他相关文章！