How to Prevent Flex Children from Exceeding Parent Height with Scrollbars in Firefox?

Prevent Flex Item from Exceeding Parent Height with Scrollbars

Issue: In Firefox, a flex child item with scrollbars exceeds the height of its parent flex container, causing content overflow and the absence of scrollbars.

Solution:

Modify the flex property of the child items #messagelist and #messagecontents as follows:

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

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

Explanation:

Chrome's default behavior is to trigger overflow and generate scrollbars when the flex-basis is set to 0. Firefox and Edge, however, require a set height or max-height for overflow to occur.

By specifying a fixed height of 1px for the flex-basis, even though it's a small value, it satisfies the requirement for creating an overflow condition and enables scrollbars to appear when content exceeds the child's height.

The above is the detailed content of How to Prevent Flex Children from Exceeding Parent Height with Scrollbars in Firefox?. For more information, please follow other related articles on the PHP Chinese website!