Meine Position: Klebriges Element ist bei Verwendung von Flexbox nicht klebrig

97

Ich war ein bisschen dabei und dachte, ich würde dieses position: sticky+ Flexbox-Gotcha teilen :

Mein klebriger Div funktionierte einwandfrei, bis ich meine Ansicht auf einen Flexbox-Container umstellte, und plötzlich war der Div nicht mehr klebrig, als er in einen Flexbox-Elternteil eingewickelt wurde.

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>
Erweitern Sie das Snippet

JSFiddle zeigt das Problem

css flexbox css-position sticky BHOLT
quelle
Bleibt dieses Verhalten in allen unterstützten Browsern bestehen position: stickyoder nur in einem / einigen?
TylerH
1
@ TylerH Ich glaube, es sind alles Browser. Es funktionierte sowohl in Chrome als auch in Safari so.
BHOLT
Vielen Dank. Ich kann bestätigen, dass das Problem und die Lösung auch in Firefox auftreten.
TylerH

Antworten:

190

Da Flexbox-Elemente standardmäßig aktiviert sind stretch, haben alle Elemente dieselbe Höhe, über die nicht gescrollt werden kann.

Durch Hinzufügen align-self: flex-startzum klebrigen Element wurde die Höhe auf "Automatisch" gesetzt, wodurch ein Bildlauf möglich war, und es wurde behoben.

Derzeit wird dies in allen gängigen Browsern unterstützt, aber Safari steht immer noch hinter einem -webkit-Präfix, und andere Browser außer Firefox haben einige Probleme mit position: stickyTabellen.

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>
Erweitern Sie das Snippet

JSFiddle zeigt die Lösung

BHOLT
quelle
23
Dies funktioniert nur, wenn Sie innerhalb des enthaltenen Flex-Elements scrollen. Wenn Sie durch das gesamte Fenster scrollen, bleibt es NICHT hängen (zumindest in Firefox). Bei Personen mit widersprüchlichem Verhalten ist es daher wahrscheinlicher, dass Sie widersprüchliche Erwartungen haben (wie z. B. i war)
aequalsb
@aequalsb Kennen Sie eine Möglichkeit, es beim Scrollen der gesamten Seite zum Festhalten zu bringen?
Douglas Gaskell
@Douglas die Frage ist irreführend, weil sie darauf hindeutet, dass das Problem vorliegt, flexboxaber das Problem hat mehr mit dem Enthalten des stickyElements zu tun . Schauen Sie sich diese Geige an: jsfiddle.net/9y87zL5c, wo die ZWEITE rote Box wie erwartet funktioniert, die ERSTE rote Box jedoch nicht klebt - also ... dies hängt nicht mit der Flexbox zusammen (daher widersprüchliche Erwartungen) ... AUCH ... i fügte ein paar Jabberwocky hinzu, um die Ergebnisse genauer zu sehen.
Aequalsb
24

In meinem Fall wurde einer der übergeordneten Container darauf overflow-x: hidden;angewendet, wodurch die position: stickyFunktionalität beeinträchtigt wird. Sie müssen diese Regel entfernen.

Auf kein übergeordnetes Element sollte die obige CSS-Regel angewendet werden. Diese Bedingung gilt für alle Eltern bis zum Element "Körper" (jedoch ohne dieses).

TheoPlatica
quelle
Sie können auch nicht overflow-x:hiddenauf dem HTML-Element haben.
Samuel Liew
Vielen Dank. Ich kämpfe IMMER mit einer klebrigen Position und wusste nichts über diesen Zustand, bis ich Ihre Antwort gelesen habe. :)
Raphael Aleixo
@SamuelLiew, ja, Sie können overflow-x: hidden;auf dem HTML-Element haben.
TheoPlatica
@ RaphaelAleixo Ich bin froh, dass ich helfen konnte :)
TheoPlatica
Dies hat mich daran gehindert, dass ein Sticky richtig funktioniert. Vielen Dank!
MoOx
7

Sie können auch versuchen, dem Flex-Element ein untergeordnetes Div mit dem darin enthaltenen Inhalt hinzuzufügen und diesem zuzuweisen position: sticky; top: 0;.

Das funktionierte für mich bei einem zweispaltigen Layout, bei dem der Inhalt der ersten Spalte klebrig sein musste und die zweite Spalte scrollbar erscheint.

Simon_Weaver
quelle
Stimme voll und ganz zu, dies ist die einfachste und zuverlässigste Option, die ich finden konnte. Auf diese Weise können Sie auch steuern, wann das Anhaften aufhören soll, indem Sie die Höhe des Behälters steuern.
Ibrahim ben Salah
0

Ich habe einen provisorischen Flexbox-Tisch gemacht und hatte dieses Problem. Um es zu lösen, platziere ich einfach die klebrige Kopfzeile außerhalb der Flexbox, kurz davor.

Andrew
quelle