integrieren flexbox und vertikal scroll in einem layout in voller hüge

Bei der Arbeit mit Bewerbungen in voller Höhe, dem Kombinieren von Flexbox und einer vertikalen Scrollbar können eine übliche Anforderung sein. Aufgrund der interaktiven Natur der Flexbox-Layouts kann es jedoch Herausforderungen stellen.

traditionelles Flexbox-Ansatz (alte Eigenschaften)

flexBox-Layouts mit der alten Syntax (Anzeige: Box) erlauben Vollhöhe mit vertikalen Scrolling in bestimmten Browern. Diese Lösung basiert auf der Einstellung der Flex-Richtung in die Spalte und der Verwendung von Überlauf-y: automatisch im übergeordneten Element.

Probleme mit der Verwendung neuerer Flexbox-Eigenschaften

versuchen, die neueren Flexbox-Eigenschaften mit einem vollständigen und scrollablen Design einleiteten. Die Problemumgehung mit Höhe: 0px; Auf einem Wrapper -Element ist unzuverlässig und erstellt zusätzliche Ausgaben.

Lösung: Höhe für vertikale Scrolling -Element

Eine robuste Lösung beinhaltet die Festlegung einer bestimmten Höhe für das Element, in dem vertikales Scrollen erwünscht ist. Auf diese Weise kann der Flexbox -Algorithmus die entsprechende Höhe berechnen und die Bildlaufleiste nach Bedarf rendern. Zum Beispiel unter Verwendung des folgenden CSS:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

minimale Höhe

Wenn eine Mindesthöhe erforderlich ist, ersetzen Sie Höhe: 0px; mit min-hoher: gewünschter Wert; Um sicherzustellen, dass das Element eine Bildlaufleiste zeigt, auch wenn sein Inhalt das angegebene Minimum nicht überschreitet. Dies ermöglicht ein optimales Rendering und das Scrollbar -Verhalten, was zu einer nahtlosen Benutzererfahrung führt.