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

Fixing Rendering Issues with Flexbox in Firefox and Chrome 48

Introduction:
Flexbox, a powerful layout system, can lead to cross-browser inconsistencies. This question tackles a rendering issue where flexbox behaves differently in Firefox and Chrome 48.

Problem:
In Chrome 47, a div with the .scroll class scrolls properly, occupying 100% height using flex. However, in Firefox, the same div uses the content height and doesn't scroll correctly.

Resolution:
The change in rendering behavior is due to an update in the flexbox specification, which sets the default minimum size of flex items to the size of their content. To override this setting and ensure cross-browser compatibility, you can add the following CSS rules:

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

This will force the .content div, which contains the .scroll div, to have a minimum size of zero, allowing it to shrink to fit the available space.

Updated Chrome Behavior:
Initially, the above solution was expected to work in both Firefox and Chrome 48. However, it has been reported that Chrome 48 has updated its rendering behavior and now emulates Firefox in terms of minimum flex sizing. Therefore, the solution provided above should also resolve the issue in Chrome 48.

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