Ma position: l'élément collant n'est pas collant lors de l'utilisation de la flexbox

Question

J'ai été coincé sur ce pour un peu et j'ai pensé partager cette 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

Answer 1

Depuis flex éléments de la boîte de défaut d' stretch, tous les éléments sont de la même hauteur, qui ne peuvent pas être affichés en contre.

L'ajout d' align-self: flex-start pour le collant élément de régler la hauteur de l'auto, ce qui a permis de défilement, et il fixe.

Actuellement, c'est uniquement pris 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