如何防止 Flex 项目超出父级高度并在 Firefox 中启用滚动条功能？

在 Firefox 中防止 Flex 项目超出父级高度并启用滚动条功能

当涉及到特定 Flexbox 时，Firefox 的行为与 Chrome 不同场景，导致子 div 的高度超过父级的高度。当带有滚动条和 flex:1 的子 div 尝试超过其父 Flexbox 容器的高度时，就会出现此问题。

简短回答

要解决此问题，对于具有overflow-y：滚动的子div，使用flex：1 1 1px而不是flex：1。 CSS 规则中的此更改可确保子 div 的 Flex 基础设置为固定高度，从而解决了 Firefox 中的问题。

说明

最常见的是，添加 min -height: 0 在列方向容器中弯曲项目解决了这个问题。然而，在这种情况下，挑战在于 flex-basis。

flex: 1 速记规则分为三个部分：flex-grow: 1、flex-shrink: 1 和 flex-basis: 0默认情况下，flex-basis 设置为 0，这不足以在 Firefox 和 Edge 浏览器中触发溢出条件。

为了遵守标准化，请给 flex-basis 一个固定的高度（即使它只是1 像素）。这样做会导致溢出，生成滚动条并防止子 div 超过父级的高度。

以下是代码调整：

<code class="css">#messagelist {
    flex: 1 1 1px; /* new */
}

#messagecontents {
    flex: 1 1 1px; /* new */
}</code>

采用此解决方案将帮助您克服Firefox 中父子 Flexbox div 之间的高度差异，确保跨浏览器的行为一致。

以上是如何防止 Flex 项目超出父级高度并在 Firefox 中启用滚动条功能？的详细内容。更多信息请关注PHP中文网其他相关文章！