Vertical scroll rendering issue in Flexbox in Firefox [duplicate]

by

This has to do with the flexbox specification’s implied minimum sizing algorithm.

This is a Firefox bug.

Adding min-width: 0; min-height: 0 to #wrapper seems to do the trick:

#wrapper {
    display: flex;
    flex-grow: 2;
    flex-basis: 0%;
    min-height: 0; /* NEW */
    min-width: 0; /* NEW */
}

DEMO

Original Answer Below


Currently you have overflow-y: scroll applied to #left.

If you also apply overflow-y: scroll to #wrapper, the vertical scroll launches in Firefox.

As to why Firefox interprets the code differently than Chrome I can’t say. The rendering engines have their differences. I recently addressed another flexbox interpretation issue between IE11 and Chrome:

More information:

More Related Contents:

  1. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  2. Flexbox column-reverse in Firefox, Edge and IE
  3. Different implementation of Flexbox in Firefox and Chrome
  4. Flex elements ignore percent padding in Firefox
  5. Why don’t flex items shrink past content size?
  6. Fill the remaining height or width in a flex container
  7. How to vertically align text inside a flexbox?
  8. Equal height rows in a flex container
  9. How to remove the arrow from a select element in Firefox
  10. How to specify line breaks in a multi-line flexbox layout?
  11. How to Right-align flex item?
  12. How to remove the space between inline/inline-block elements?
  13. How to add 1px margin to a flex item that is flex: 0 0 25%?
  14. flex container min-height ignored in IE
  15. Keep the middle item centered when side items have different widths
  16. Maintain image aspect ratio when changing height
  17. float does not work in a flex container
  18. How can I have two fixed width columns with one flexible column in the center?
  19. CSS grid – maximum number of columns without media queries
  20. All widths set to width of widest element
  21. 5 items per row, auto-resize items in flexbox
  22. flex-grow not working in column layout
  23. CSS – How to have children in different parents the same height?
  24. Why does flexbox stretch my image rather than retaining aspect ratio?
  25. How to make a sticky footer using flexbox in IE11?
  26. Height of flex container not working properly in Safari
  27. Pin a flex item to the bottom of the container
  28. Aligning to the bottom in flexbox
  29. Can flexbox detect when a flex item wraps?
  30. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?

Leave a Comment