为什么“overflow-y”在带有嵌套 Flexbox 的 Firefox 中不起作用？

Overflow-y 无法在带有嵌套 Flexbox 的 Firefox 中工作

许多 Web 开发人员都熟悉 Overflow-y 无法正常工作的问题在 Firefox 中与嵌套 Flexbox 布局一起使用时。这可能是一个令人沮丧的问题，尤其是对于那些不熟悉 CSS3 复杂性的人来说。

问题源于 Firefox 计算 Flex 项目最小大小的方式。默认情况下，弹性项目的大小根据其子项的固有大小进行调整。但是，当 Flex 项目内的元素应用了 Overflow-y 时，Firefox 在计算最小大小时不会考虑这一点。因此，即使子元素具有可滚动内容，Flex 项目也无法缩小到其子元素的大小以下。

要解决此问题，需要禁用 Flex 项目的默认最小大小调整行为。这可以通过将 min-height:0 属性添加到父 Flex 项目来完成。例如，在提供的代码示例中，应将以下 CSS 规则添加到 .level-0-row2 类中：

<code class="css">.level-0-row2 {
  min-height: 0;
}</code>

添加此规则后，Firefox 将正确计算Flex 项目和 Overflow-y 属性将按预期工作。

通过了解此问题的根本原因并实施适当的 CSS 修复，Web 开发人员可以确保其嵌套的 Flexbox 布局在 Firefox 和其他现代浏览器中正确运行浏览器。

以上是为什么“overflow-y”在带有嵌套 Flexbox 的 Firefox 中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！