Ma position: sticky element n'est pas sticky lors de l'utilisation de flexbox

je suis bloqué sur ce pour un peu et j'ai pensé partager ce position: sticky + flex zone de gotcha:

Mon collant div fonctionnait bien, jusqu'à ce que j'ai changé mon point de vue à un flex de la boîte de conteneur, et tout à coup le div n'était pas collante quand il était enveloppé dans un flex zone parent.

.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>

JSFiddle montrant le problème

28
demandé sur TylerH 2017-06-09 01:42:53

1 réponses

puisque les éléments de la boîte flex sont par défaut à stretch, tous les éléments sont de la même hauteur, qui ne peut pas être roulée contre.

ajouter align-self: flex-start à l'élément collant réglez la hauteur à auto, ce qui permet le défilement, et corrigez-le.

Actuellement, c'est seulement prise en charge dans Safari et Edge

.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;
  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>

jsfiddle montrant la solution

42
répondu BHOLT 2018-06-29 23:37:14