/ / Moja pozycja: lepki element nie jest lepki podczas używania flexbox - css, flexbox, sticky

Moja pozycja: lepki element nie jest lepki podczas używania flexbox - css, flexbox, sticky

Utknąłem na tym przez chwilę i pomyślałem, że podzielę się tym position: sticky + skrzynka odbiorcza flex:

Mój lepki div działał bez zarzutu, dopóki nie zmienił mojego widoku na pojemnik z flexboxem, i nagle div nie był lepki, kiedy był owinięty w rodzica flex box.

.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 pokazujący problem

Odpowiedzi:

37 dla odpowiedzi № 1

Ponieważ domyślnie elementy flex box są stretch, wszystkie elementy mają tę samą wysokość, na którą nie można przewijać.

Dodawanie align-self: flex-start do lepkiego elementu ustaw wysokość na auto, co pozwoliło przewijać i naprawił.

Obecnie to tylko utrzymany w Safari i 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 pokazuje rozwiązanie