Wie aktiviere ich vertikales Scrollen in einer Flexbox-App mit voller Höhe?

Kombination von Flexbox und vertikalem Scrollen in Anwendungen mit voller Höhe

Problem:

Erstellen eines App-Layouts mit voller Höhe mit Flexbox bei gleichzeitiger Aktivierung der Vertikalen Scrollen.

Diskussion:

Mithilfe der neuesten Flexbox-Eigenschaften kann ein App-Layout mit voller Höhe erreicht werden. Das Hinzufügen von vertikalem Scrollen kann jedoch eine Herausforderung sein.

Der anfängliche Ansatz mit einem veralteten Flexbox-Layout (z. B. display: box) ist für Browser geeignet, die nur diese ältere Version unterstützen.

Um dies zu umgehen Problem wurde ein Hack vorgeschlagen, bei dem die Höhe des Containers auf 0 Pixel gesetzt wird. Diese Problemumgehung löst zwar das Bildlaufproblem, schafft aber auch neue Probleme.

Lösung:

Die ideale Lösung besteht darin, eine Höhe für das scrollbare Element innerhalb des Flexbox-Layouts festzulegen. Standardmäßig berechnet Flexbox die Höhe seiner Elemente, sodass eine Höhe von 0 Pixel effektiv einen vertikalen Bildlauf ermöglicht.

Wenn eine Mindesthöhe gewünscht wird, kann stattdessen „Min-Height“ verwendet werden, z. B. „Min-Height: 100 Pixel“. .

Codebeispiel:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* or min-height: 100px */
}

Dieser Ansatz stellt sicher, dass das Bild scrollbar ist Element hat eine Höhe, während Flexbox diese dynamisch neu berechnen kann.

Aktualisierte Fiddle:

[Aktualisierte JSFiddle](http://jsfiddle.net/ch7n6/867/ ) demonstriert die endgültige Lösung.

Das obige ist der detaillierte Inhalt vonWie aktiviere ich vertikales Scrollen in einer Flexbox-App mit voller Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!