Sticky Elements und Flexbox: A Gotcha

Sticky-Positionierung, die für Elemente verwendet wird, die beim Scrollen an bestimmten Positionen fixiert bleiben, verhält sich unerwartet bei Verwendung mit Flexbox-Containern. Dieses Problem tritt auf, wenn Flexbox-Elemente standardmäßig gestreckt werden, was zu Elementen mit konsistenten Höhen führt, gegen die nicht gescrollt werden kann.

Um dieses Problem zu beheben, fügen Sie align-self: flex-start zum Sticky-Element hinzu. Dieses Attribut setzt die Höhe des Elements auf „Auto“, wodurch ein Scrollen ermöglicht und das Positionierungsproblem gelöst wird.

Es ist wichtig zu beachten, dass die Browserunterstützung für Position: Sticky-Tabellen unterschiedlich ist. Safari erfordert das Präfix -webkit-, während bei Firefox derzeit Probleme auftreten.

Hier ist ein angepasster Codeausschnitt als Referenz:

.flexbox-wrapper {<br> display: flex; <br> Überlauf: automatisch;<br> Höhe: 200px;          /<em> Nicht notwendig – zum Beispiel nur </em>/<br>}<br>.regular {<br> Hintergrundfarbe: Blau; /<em> Nicht notwendig – nur zum Beispiel </em>/<br> height: 600px;          /<em> Nicht notwendig – zum Beispiel nur </em>/<br>}<br>.sticky {<br> Position: -webkit-sticky; /<em> für Safari </em>/<br> position: sticky;<br> top: 0;<br> align-self: flex-start; /<em> <-- das ist die Lösung </em>/<br> Hintergrundfarbe: rot;  /<em> Nicht notwendig – zum Beispiel nur </em>/<br>}<br>

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Sticky Element nicht mit Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!