Warum werden meine Flexbox-Scroll-Divs in Firefox und Chrome unterschiedlich gerendert und wie kann ich das Problem beheben?

Browserübergreifende Rendering-Probleme mit Flexbox in Firefox und Chrome

Das Flexbox-Layoutmodell bietet eine intuitive und effiziente Möglichkeit, die Positionierung und Positionierung von Elementen zu handhaben Größe. Es kann jedoch zu Inkonsistenzen im Renderverhalten verschiedener Browser kommen.

Problem: Unsachgemäßes Scrollen in .Scroll Div

In früheren Versionen von Chrome (47) wurden Elemente mit der . Die Scroll-Klasse hat mit Flex korrekt gescrollt und 100 % der Höhe eingenommen. In Firefox führte dieselbe Klasse jedoch dazu, dass das Div nur die Inhaltshöhe verwendete, was zu einem falschen Scrollverhalten führte.

Browserübergreifende Lösung

Um dieses Problem zu beheben , muss die standardmäßige Mindestgröße von Flex-Elementen überschrieben werden. Durch Festlegen von min-width und min-height auf 0 kann das .scroll-Div verkleinert werden, um es an seinen Inhalt anzupassen, während eine Bildlaufleiste beibehalten wird:

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

Aktualisiertes Rendering-Verhalten in Chrome 48

Es ist wichtig zu beachten, dass Chrome 48 ein ähnliches Rendering-Verhalten wie Firefox übernommen hat. Folglich sollte die oben bereitgestellte Lösung nun konsistent in beiden Browsern funktionieren.

Zusätzliche Informationen

Die Änderung in Chrome 48 wurde implementiert, um sie an die neueste Flexbox-Spezifikation anzupassen, die Standardmäßig ist die Mindestbreite und Mindesthöhe auf „Auto“ eingestellt. Dies ermöglicht angemessenere Mindestgrößen für flexible Artikel.

Weitere Einzelheiten finden Sie in den Spezifikationen und Fehlerberichten, die in der Antwort, auf die verwiesen wird, verlinkt sind.

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