Flexbox Overflow-Y Issue with Nested Elements in Firefox

In a CSS layout using flexbox, where nested elements are contained within a parent flexbox item, overflow-y may not function as expected in Firefox. This issue arises specifically when the nested element is given an overflow-y property of auto.

Problem Explanation:

Flexbox items automatically calculate their minimum size based on the intrinsic size of their child elements. However, when there are child elements with overflow properties applied, such as overflow-y, the flex item will maintain a minimum size equivalent to the child's content, even if it exceeds the available space.

Solution:

To resolve this issue in Firefox, it is necessary to explicitly set the min-height property of the parent flex item to 0. This disables the default minimum sizing behavior and allows the flex item to shrink below the child's min-content size.

.parent-flex-item {
  min-height: 0;
}

By applying this fix, the nested element with overflow-y: auto will now be able to shrink and display a scrollbar when its content exceeds the available height.

Code Example:

Consider the following HTML and CSS code:

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

With this code, the nested element will have a scrollbar in Firefox, allowing users to view the overflowed content.