Warum funktioniert mein Sticky Element nicht in einem Flexbox-Container?

Flexbox-Problem: Position: Sticky-Element verhält sich unvorhersehbar

Entwickler stoßen häufig auf unerwartetes Verhalten, wenn sie Position: Sticky in einem Flexbox-Container verwenden. Standardmäßig werden Flexbox-Elemente gestreckt, um den verfügbaren Platz auszufüllen, was zu gleichen Höhen für alle Elemente führt, was das Scrollen ausschließt und das Sticky-Element funktionsunfähig macht.

Die Lösung liegt in der Änderung der align-self-Eigenschaft des Sticky-Elements auf Flex-Start, wodurch die Höhe auf Auto zurückgesetzt wird. Dies ermöglicht das Scrollen und ermöglicht, dass das Sticky-Element an seiner beabsichtigten Position haftet.

Beispiel:

Im folgenden Code funktionierte das Sticky-Element erst beim Ausrichten korrekt. self: flex-start wurde hinzugefügt:

<div>
<pre class="brush:php;toolbar:false">.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

Browser Unterstützung:

• align-self: Flex-Start wird in allen gängigen Browsern unterstützt, außer Safari, das das Präfix -webkit- erfordert:

  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }

Durch die Implementierung dieses Fixes können Entwickler sicherstellen, dass sich Position: Sticky-Elemente in Flexbox-Containern wie vorgesehen verhalten.