Warum scrollen meine Flexbox-Elemente in Firefox und Chrome unterschiedlich und wie kann ich das beheben?

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

In Firefox und Chrome 48 unterscheidet sich das Flexbox-Rendering, was zu einem Problem mit führt scrollender Inhalt. In Chrome 47 scrollen Elemente mit der Klasse .scroll korrekt und nehmen 100 % der Höhe ihres Containers ein. In Firefox halten sich diese Elemente jedoch an ihre Inhaltshöhe und scrollen nicht ausreichend.

Lösung

Dieses browserübergreifende Problem ist auf ein Update der Flexbox-Spezifikation zurückzuführen Dadurch wird die standardmäßige Mindestgröße von Flex-Elementen auf die Größe ihres Inhalts festgelegt (min-width: auto / min-height: auto). Um dies zu korrigieren, können Sie diese Einstellung mit dem folgenden CSS überschreiben:

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

Indem Sie sowohl die Mindesthöhe als auch die Mindestbreite auf 0 setzen, erzwingen Sie, dass die Elemente ihren Inhalt verkleinern, sodass sie dies tun können Scrollen Sie in ihrem Container korrekt.

Neueste Entwicklungen

Es ist erwähnenswert, dass Chrome 48 dies getan hat Seitdem wurde sein Renderverhalten aktualisiert, um das von Firefox zu emulieren. Daher sollte die oben bereitgestellte Lösung nun sowohl in Firefox als auch in Chrome 48 funktionieren.

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