如何在 Firefox 中使用滚动条防止 Flex 子项超过父项高度？

使用滚动条防止 Flex 项目超出父项高度

问题： 在 Firefox 中，带有滚动条的 Flex 子项目超过其父flex容器的高度，导致内容溢出，没有滚动条。

解决方案：

修改子项的flex属性#messagelist和#消息内容如下：

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

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

说明：

Chrome 的默认行为是在 flex-basis 设置为 0 时触发溢出并生成滚动条。 Firefox 和 Edge但是，需要设置一个高度或 max-height 才会发生溢出。

通过为 flex-basis 指定固定高度 1px，即使它是一个很小的值，也满足了创建溢出的要求条件，并在内容超过孩子的高度时启用滚动条。

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