Warum scrollt meine Flexbox in Firefox und Chrome 48 unterschiedlich und wie kann ich das beheben?

Behebung von Rendering-Problemen mit Flexbox in Firefox und Chrome 48

Einführung:
Flexbox, ein leistungsstarkes Layout kann zu browserübergreifenden Inkonsistenzen führen. Diese Frage befasst sich mit einem Rendering-Problem, bei dem sich Flexbox in Firefox und Chrome 48 unterschiedlich verhält.

Problem:
In Chrome 47 scrollt ein Div mit der .scroll-Klasse ordnungsgemäß und belegt 100 % Höhe mit Flex. In Firefox verwendet jedoch dasselbe Div die Inhaltshöhe und scrollt nicht korrekt.

Lösung:
Die Änderung im Rendering-Verhalten ist auf eine Aktualisierung der Flexbox-Spezifikation zurückzuführen , wodurch die standardmäßige Mindestgröße von Flex-Elementen auf die Größe ihres Inhalts festgelegt wird. Um diese Einstellung zu überschreiben und die browserübergreifende Kompatibilität sicherzustellen, können Sie die folgenden CSS-Regeln hinzufügen:

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

Dadurch wird erzwungen, dass das .content-Div, das das .scroll-Div enthält, eine Mindestgröße von Null hat , sodass es verkleinert werden kann, um es an den verfügbaren Platz anzupassen.

Aktualisiertes Chrome-Verhalten:
Anfangs sollte die obige Lösung sowohl in Firefox als auch in Chrome 48 funktionieren. Dies ist jedoch der Fall Es wurde berichtet, dass Chrome 48 sein Rendering-Verhalten aktualisiert hat und nun Firefox hinsichtlich der minimalen Flex-Größe emuliert. Daher sollte die oben bereitgestellte Lösung das Problem auch in Chrome 48 beheben.

Das obige ist der detaillierte Inhalt vonWarum scrollt meine Flexbox in Firefox und Chrome 48 unterschiedlich und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!