Warum funktioniert Overflow-y in Firefox mit verschachteltem Flexbox-Layout nicht wie erwartet?

Firefox Overflow-Y-Problem mit verschachteltem Flexbox-Layout

Bei einem Layout mit 100 % Breite und 100 % Höhe, das mit verschachtelter Flexbox entworfen wurde, kam es zu einem unerwarteten Problem In Firefox tritt ein Verhalten auf, bei dem Overflow-y nicht ordnungsgemäß funktioniert.

Frage:

Warum funktioniert Overflow-y mit dem bereitgestellten CSS-Code nicht wie erwartet? Zeigt Firefox eine falsche Bildlaufleiste an?

Antwort:

Das Problem entsteht durch das standardmäßige Mindestgrößenverhalten von Flex-Elementen. Flex-Elemente leiten ihre Mindestgröße basierend auf der inhärenten Größe ihrer untergeordneten Elemente ab, wobei der auf ihre Nachkommen angewendete Overflow-y außer Acht gelassen wird.

Wenn ein Element mit overflow-y: [hidden|scroll|auto] in einem Flex-Element platziert wird, Es ist erforderlich, „min-width:0“ (für horizontale Flex-Container) oder „min-height:0“ (für vertikale Flex-Container) für das entsprechende Vorfahren-Flex-Element festzulegen. Dadurch wird das standardmäßige Mindestgrößenverhalten deaktiviert, sodass das Flex-Element unter die Mindestinhaltsgröße des untergeordneten Elements schrumpfen kann.

Um das Problem zu beheben, fügen Sie „min-height:0“ zur Regel „.level-0-row2“ hinzu. wie im folgenden aktualisierten CSS-Code gezeigt:

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

Dadurch wird sichergestellt, dass das .level-0-row2-Flex-Element den Überlauf seiner untergeordneten Elemente berücksichtigt und es ermöglicht, unter die minimale Inhaltsgröße zu schrumpfen, wodurch die ordnungsgemäße Funktion ermöglicht wird Überlaufverhalten in Firefox.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Overflow-y in Firefox mit verschachteltem Flexbox-Layout nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!