## Warum überschreitet ein Flex-Element mit „flex: 1' seine übergeordnete Höhe in Firefox, aber nicht in Chrome?

Verhindern, dass ein Flex-Element die übergeordnete Höhe überschreitet, und Funktionalität der Bildlaufleiste in Firefox

In Firefox wurde beobachtet, dass ein untergeordnetes Flexbox-Element mit Flex: 1 und Überlauf- y: Der Bildlauf überschreitet möglicherweise die Höhe der übergeordneten Flexbox, was dazu führt, dass der Inhalt überläuft und Bildlaufleisten nicht angezeigt werden. Umgekehrt füllt das untergeordnete Element in Chrome den verbleibenden vertikalen Raum korrekt aus, Bildlaufleisten werden angezeigt und die übergeordnete Höhe wird nicht überschritten.

Lösung

Um dieses Problem zu beheben, ersetzen Sie „flex: 1“ durch „flex“. : 1 1 1px für die untergeordneten Flexbox-Elemente. Dadurch wird „flex-basis“ auf einen festen Wert von 1 Pixel gesetzt, wodurch sichergestellt wird, dass ein Bildlaufüberlauf auftritt und Bildlaufleisten angezeigt werden.

Erklärung

Trotz der üblichen Praxis, in solchen Fällen min-height: 0 festzulegen , es reicht in diesem Szenario nicht aus. Die Abkürzungsregel „flex: 1“ beinhaltet „flex-basis: 0“, was in Firefox und Edge nicht ausreicht, um einen Überlauf auszulösen.

Laut MDN:

Damit der Überlauf eine Wirkung hat, Für den Container auf Blockebene muss entweder eine festgelegte Höhe (Höhe oder maximale Höhe) oder ein Leerraum auf „nowrap“ festgelegt sein.

Um ein standardisiertes Verhalten sicherzustellen und einen Überlauf zu ermöglichen, legen Sie eine feste Höhe für „Flex-Basis“ fest ein minimaler Wert wie 1px.

Das obige ist der detaillierte Inhalt von## Warum überschreitet ein Flex-Element mit „flex: 1' seine übergeordnete Höhe in Firefox, aber nicht in Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!