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>
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>
42
répondu
BHOLT
2018-06-29 23:37:14