Warum klebt mein Klebeelement nicht mehr in einem Flexbox-Behälter?

Klebriges Element bleibt bei Verwendung von Flexbox hängen

Sie sind auf ein Problem gestoßen, bei dem ein klebriges Element seine Klebrigkeit verliert, wenn es in einem Flexbox-Container platziert wird . Dies liegt daran, dass Flexbox-Elemente von Natur aus gedehnt werden, um ihren verfügbaren Platz auszufüllen, was dazu führt, dass alle Elemente die gleiche Höhe haben und das vertikale Scrollen behindert.

Behebung: Ausrichtung anpassen

Zur Behebung Fügen Sie dazu „align-self: flex-start“ zum Sticky-Element hinzu. Dies erzwingt, dass die Höhe des Elements automatisch und nicht festgelegt wird, sodass die Seite wie erwartet scrollen kann.

Browserkompatibilität

Während die meisten Browser diesen Fix unterstützen, erfordert Safari eine Präfix „-webkit-“ für die Sticky-Positionierung. Darüber hinaus kann es bei der Sticky-Positionierung in einigen Browsern außer Firefox zu Problemen mit Tabellen kommen.

Aktualisierter Code:

.flexbox-wrapper {
  display: flex;
  overflow: auto;
}

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

Das obige ist der detaillierte Inhalt vonWarum klebt mein Klebeelement nicht mehr in einem Flexbox-Behälter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!