Why Do My Flexbox Scroll Divs Render Differently in Firefox and Chrome, and How Can I Fix It?

Cross-Browser Rendering Issues with Flexbox in Firefox and Chrome

The flexbox layout model provides an intuitive and efficient way to handle element positioning and sizing. However, inconsistencies in rendering behavior across browsers can arise.

Problem: Improper Scrolling in .Scroll Div

In earlier versions of Chrome (47), elements with the .scroll class scrolled correctly using flex, taking up 100% height. However, in Firefox, the same class caused the div to use only the content height, resulting in incorrect scrolling behavior.

Cross-Browser Solution

To resolve this issue, the default minimum size of flex items must be overridden. By setting min-width and min-height to 0, the .scroll div can shrink to fit its content while maintaining a scrollbar:

.content {
    min-height: 0;
    min-width: 0;
}

Updated Rendering Behavior in Chrome 48

It is important to note that Chrome 48 has adopted a similar rendering behavior to Firefox. Consequently, the solution provided above should now work consistently across both browsers.

Additional Information

The change in Chrome 48 was implemented to align with the latest flexbox specification, which defaults min-width and min-height to auto. This allows for more reasonable minimum sizes for flex items.

For further details, refer to the specifications and bug reports linked in the referenced answer.

The above is the detailed content of Why Do My Flexbox Scroll Divs Render Differently in Firefox and Chrome, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!