How to Prevent Flex Item from Exceeding Parent Height and Enable Scrollbar in Firefox?

Preventing Flex Item from Exceeding Parent Height and Enabling Scrollbar in Firefox

Flex containers can be tricky to manage, especially when dealing with child elements that have scrollbars. In Firefox, a child div with a flex: 1 property and overflow-y: scroll tends to exceed the height of its parent flexbox container. This issue arises because browsers interpret the flex: 1 shorthand differently.

To resolve this problem, replace flex: 1 with flex: 1 1 1px. This adjusted value explicitly sets the flex-basis (the minimum width or height) to 1px. When used in combination with overflow-y: scroll, it forces the child div to respect the parent's height limit and display scrollbars when necessary.

Here are the specific code adjustments to make:

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

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

With these changes in place, the child div will expand to fill the remaining vertical space within the parent container, but it will no longer exceed the parent's height. Scrollbars will appear when the content overflows, allowing users to scroll through the content vertically without the child div growing indefinitely.

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