firefox overflow-y not working with nested flexbox

by

tl;dr: you need min-height:0 in your .level-0-row2 rule. (Here’s a codepen with that fix.)

More detailed explanation:

Flex items establish a default minimum size that’s based on their children’s intrinsic size (which doesn’t consider “overflow” properties on their children/descendants).

Whenever you’ve got an element with overflow: [hidden|scroll|auto] inside of a flex item, you need to give its ancestor flex item min-width:0 (in a horizontal flex container) or min-height:0 (in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child’s min-content size.

See https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 for more examples of sites that have been bitten by this. (Note that this is just a metabug to track sites that were broken by this sort of issue, after this spec-text was implemented — it’s not actually a bug in Firefox.)

You won’t see this in Chrome (at least, not as of this posting) because they haven’t implemented this minimum sizing behavior yet. (EDIT: Chrome has now implemented this min-sizing behavior, but they may still incorrectly collapse min-sizes to 0 in some cases.)

More Related Contents:

  1. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  2. Prevent flex item from exceeding parent height and make scroll bar work
  3. Issue when centering vertically with flexbox when heights are unknown
  4. Make a div span two rows in a grid
  5. What’s the difference between align-content and align-items?
  6. How to change flexbox wrap?
  7. Create a Masonry grid with flexbox (or other CSS)
  8. css grid of squares with flexbox
  9. Set flexbox children to have different heights to use up available space
  10. Flexbox column-reverse in Firefox, Edge and IE
  11. Flexbox affects overflow-wrap behavior
  12. Font-size issues comparing chrome and Firefox
  13. Div height 100% and expands to fit content [duplicate]
  14. Are flex items block level element?
  15. Bootstrap change order of columns
  16. Flex auto margin not working in IE10/11
  17. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  18. How to make the overflow CSS property work with hidden as value
  19. Scrollbar color change in Firefox
  20. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  21. The difference between flex:1 and flex-grow:1
  22. Preventing an image from being draggable or selectable without using JS
  23. How to ignore parent element’s overflow:hidden in css
  24. How to control number of items per row using media queries in Flexbox?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. Horizontal masonry layout with flexbox CSS only [duplicate]
  27. Firefox blurs an image when scaled through external CSS or inline style.
  28. Horizontal scroll in DIV with many small DIV’s inside (no text)
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. Flex elements ignore percent padding in Firefox

Leave a Comment