web-dev-qa-db-fra.com

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

Je suis resté un peu coincé là-dessus et je pensais partager cela position: sticky + flex box gotcha:

Mon div collant fonctionnait bien jusqu'à ce que je passe à un conteneur de boîte flexible, et soudain, la div ne collait plus lorsqu'elle était enveloppée dans un parent de boîte flexible.

.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

cssflexboxsticky
55
BHOLT

Étant donné que les éléments flex box sont définis par défaut sur stretch, tous les éléments ont la même hauteur, ce qui ne permet pas de les faire défiler.

Ajouter align-self: flex-start sur l'élément collant, définissez la hauteur sur auto, ce qui permet le défilement et le fixe.

Actuellement, il ne s'agit que de supporté 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

96
BHOLT