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

Cross-Browser Rendering Problems with Flexbox in Firefox and Chrome

In Firefox and Chrome 48, flexbox rendering differs, leading to a problem with scrolling content. In Chrome 47, elements with the .scroll class scroll correctly and occupy 100% of their container's height. However, in Firefox, these elements adhere to their content height and do not scroll adequately.

Solution

This cross-browser issue stems from an update to the flexbox specification that sets the default minimum size of flex items to the size of their content (min-width: auto / min-height: auto). To correct this, you can override this setting with the following CSS:

.content {
    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

By setting both min-height and min-width to 0, you force the elements to shrink-wrap their content, enabling them to scroll within their container correctly.

Recent Developments

It's worth noting that Chrome 48 has since updated its rendering behavior to emulate that of Firefox. As a result, the solution provided above should now work in both Firefox and Chrome 48.

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