Why is `overflow-y` not working with nested flexbox in Firefox?

Firefox overflow-y Not Working with Nested Flexbox

In CSS3 flexbox, an issue arises in Firefox when overflow-y is applied to a nested flex element. This prevents the flex element from scrolling vertically, as seen in this CodePen: http://codepen.io/anon/pen/NPYVga.

Detailed Explanation:

By default, flex items establish a minimum size based on their children's intrinsic size. When an element with overflow: [hidden|scroll|auto] is contained within a flex item, the flex item consistently refuses to shrink smaller than the child's minimum content size.

Solution:

To resolve this issue, assign min-height:0 to the ancestor flex item (.level-0-row2 in the provided code). This disables the default minimum sizing behavior, allowing the flex item to shrink as needed.

Here's a corrected codepen with the fix:

CSS:

.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 0;
}

Note:

Chrome does not currently enforce this default minimum sizing behavior, but may incorrectly collapse min-sizes to 0 in specific situations.

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