Firefox 中嵌套元素的 Flexbox Overflow-Y 问题

在使用 Flexbox 的 CSS 布局中，其中嵌套元素包含在父 Flexbox 中item、overflow-y 可能无法在 Firefox 中按预期运行。当嵌套元素被赋予 auto 的overflow-y 属性时，就会特别出现此问题。

问题说明：

Flexbox 项目根据内在的自动计算其最小尺寸他们的子元素的大小。但是，当存在应用了溢出属性的子元素（例如overflow-y）时，Flex项目将保持与子元素内容相等的最小大小，即使它超出了可用空间。

解决方案:

要在 Firefox 中解决此问题，需要将父 Flex 项目的 min-height 属性显式设置为 0。这将禁用默认的最小大小调整行为并允许 Flex 项目缩小低于子级的最小内容大小。

.parent-flex-item {
  min-height: 0;
}

通过应用此修复，带有 Overflow-y: auto 的嵌套元素现在能够在其内容超出可用高度时缩小并显示滚动条。

代码示例:

考虑以下 HTML 和 CSS 代码：

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

使用此代码，嵌套元素在 Firefox 中将有一个滚动条，允许用户查看溢出的内容。