Why is overflow-y not working as expected in Firefox with nested flexbox layout?

Firefox Overflow-Y Issue with Nested Flexbox Layout

In a 100% width and 100% height layout designed with nested flexbox, an unexpected behavior is encountered in Firefox where overflow-y is not functioning correctly.

Question:

Why is overflow-y not working as expected with the provided CSS code, causing Firefox to show an incorrect scrollbar?

Answer:

The issue arises due to the default minimum sizing behavior of flex items. Flex items derive their minimum size based on their children's inherent size, disregarding overflow-y applied to their descendants.

When an element with overflow-y: [hidden|scroll|auto] is placed within a flex item, it is necessary to set min-width:0 (for horizontal flex containers) or min-height:0 (for vertical flex containers) on the corresponding ancestor flex item. This will disable the default minimum sizing behavior, allowing the flex item to shrink below the child's min-content size.

To resolve the issue, add min-height:0 to the .level-0-row2 rule, as demonstrated in the following updated CSS code:

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

This ensures that the .level-0-row2 flex item considers its children's overflow-y and allows it to shrink below the minimum content size, thereby enabling proper overflow behavior in Firefox.

The above is the detailed content of Why is overflow-y not working as expected in Firefox with nested flexbox layout?. For more information, please follow other related articles on the PHP Chinese website!