Why Does My Flex Child Exceed Parent Height in Firefox but Not Chrome?

Preventing Child Flex Item from Exceeding Parent Height

When a flex container contains a child item with both flex: 1 and overflow-y: scroll, a discrepancy between Chrome and Firefox arises. In Chrome, the child item expands to fill the remaining space without exceeding the parent's height, resulting in visible scrollbars. In Firefox, however, the child item's height increases, breaking out of the parent.

Solution

To resolve this issue in Firefox, replace flex: 1 with flex: 1 1 1px. This sets a fixed minimum basis of 1px, ensuring that the child item does not exceed the parent's height even when there is content overflow.

Revised Code

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

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

This modification ensures that the child items expand to fill the available space while remaining contained within the flex container. Scrollbars will appear in both Chrome and Firefox, allowing users to view content beyond the visible area.

The above is the detailed content of Why Does My Flex Child Exceed Parent Height in Firefox but Not Chrome?. For more information, please follow other related articles on the PHP Chinese website!