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

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

Flex 容器可能很难管理，尤其是在处理子元素时有滚动条的。在 Firefox 中，具有 flex: 1 属性和 overflow-y:scroll 的子 div 往往会超过其父 Flexbox 容器的高度。出现此问题的原因是浏览器对 flex: 1 简写的解释不同。

要解决此问题，请将 flex: 1 替换为 flex: 1 1 1px。此调整值明确将 flex-basis（最小宽度或高度）设置为 1px。当与 overflow-y:scroll 结合使用时，它会强制子 div 遵守父级的高度限制，并在必要时显示滚动条。

以下是具体的代码调整：

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

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

完成这些更改后，子 div 将扩展以填充父容器内剩余的垂直空间，但它将不再超过父容器的高度。当内容溢出时会出现滚动条，允许用户垂直滚动内容，而子 div 不会无限增长。

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