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

Prevent Flex Item from Exceeding Parent Height and Enable Scroll Bar Functionality in Firefox

Firefox behaves differently from Chrome when it comes to a specific flexbox scenario, causing the child div's height to exceed the parent's height. This issue arises when a child div with a scrollbar and flex:1 tries to exceed the height of its parent flexbox container.

Short Answer

To resolve this issue, use flex: 1 1 1px instead of flex: 1 for the child divs with overflow-y: scroll. This change in the CSS rule ensures that the child div's flex basis is set to a fixed height, resolving the problem in Firefox.

Explanation

Most often, adding min-height: 0 to flex items in a column-direction container solves the problem. However, in this case, the challenge lies in flex-basis.

The flex: 1 shorthand rule breaks down into three parts: flex-grow: 1, flex-shrink: 1, and flex-basis: 0. By default, flex-basis is set to 0, which is insufficient to trigger an overflow condition in Firefox and Edge browsers.

To adhere to the standardization, give flex-basis a fixed height (even if it's just 1px). Doing so enables an overflow to occur, generating scrollbars and preventing the child div from exceeding the parent's height.

Here are the code adjustments:

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

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

Adopting this solution will help you overcome the height discrepancy between the parent and child flexbox divs in Firefox, ensuring consistent behavior across browsers.

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