## Why Does a Flex Item with `flex: 1` Exceed Its Parent Height in Firefox, But Not Chrome?

Preventing Flex Item from Exceeding Parent Height and Functionality of Scroll Bar in Firefox

In Firefox, it is observed that a child flexbox item with flex: 1 and overflow-y: scroll may exceed the height of its parent flexbox, resulting in content overflowing and scrollbars not appearing. Conversely, in Chrome, the child item correctly fills the remaining vertical space, scrollbars appear, and the parent height is not exceeded.

Solution

To resolve this issue, replace flex: 1 with flex: 1 1 1px for the child flexbox items. This sets flex-basis to a fixed value of 1px, ensuring that a scroll overflow will occur and scrollbars will appear.

Explanation

Despite common practice of setting min-height: 0 in such cases, it is insufficient in this scenario. The shorthand rule flex: 1 includes flex-basis: 0, which in Firefox and Edge is insufficient to trigger an overflow.

According to MDN:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

To ensure standardized behavior and enable overflow, set a fixed height for flex-basis, even a minimal value like 1px.

The above is the detailed content of ## Why Does a Flex Item with `flex: 1` Exceed Its Parent Height in Firefox, But Not Chrome?. For more information, please follow other related articles on the PHP Chinese website!