Wie kann ich vertikales Scrollen in einer Flexbox-Anwendung voller Höhe implementieren?

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

Flexbox bietet einen leistungsstarken Mechanismus zum Erstellen flexibler Layouts. Wenn es jedoch in Verbindung mit einer Anwendung in voller Höhe verwendet wird, kann das Erreichen eines vertikalen Bildlaufs eine Herausforderung sein.

Vorherige Lösungen

Frühere Ansätze, wie die Verwendung der älteren Flexbox-Eigenschaften (z. B. Anzeige: box) haben sich für Browser, die die ältere Flexbox-Syntax unterstützen, als effektiv erwiesen. Für moderne Browser, die die neueren Flexbox-Eigenschaften verwenden, wurden jedoch Problemumgehungen wie das Festlegen von height: 0px für den Container verwendet, die jedoch zu unerwünschten Nebenwirkungen führen können.

Optimale Lösung

Die optimale Lösung beinhaltet das Festlegen eine Höhe zum vertikal scrollbaren Element innerhalb des Flexbox-Layouts. Durch Angabe einer Höhe (oder einer Mindesthöhe) berechnet die Flexbox die Höhe des Elements neu, sodass es nach Bedarf vergrößert werden kann, um den Inhalt aufzunehmen, und gleichzeitig bei Bedarf weiterhin vertikales Scrollen erzwungen wird.

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

Vorteile

Diese Lösung:

• Bietet sowohl horizontale als auch vertikale Flexibilität innerhalb der Flexbox Layout.
• Sorgt für vertikales Scrollen nur bei Bedarf, ohne dass zusätzliche Problemumgehungen erforderlich sind.
• Ist vollständig kompatibel mit modernen Browsern und zukünftigen CSS-Standards.

Demo

Eine erweiterte Version der bereitgestellten JSFiddle demonstriert die optimale Lösung in Aktion: http://jsfiddle.net/ch7n6/867/.

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