/ / Moje pozícia: lepkavý prvok nie je lepkavý pri použití flexbox - css, flexbox, lepkavý

Moja pozícia: lepkavý prvok nie je lepkavý pri použití flexbox - css, flexbox, lepkavý

Bol som na to trochu prilepený a myslel som si, že sa o to podelím position: sticky + flex box gotcha:

Moja lepkavá div fungovala v poriadku, kým som nezmenila môj pohľad na kontajner s flex boxom a náhle to nebolo lepkavé, keď bolo zabalené do rodičov s flex boxom.

.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 ukazuje problém

odpovede:

37 pre odpoveď č. 1

Vzhľadom k tomu, prvkov flex boxu predvolené stretch, všetky prvky majú rovnakú výšku, ktorú nemožno posúvať proti.

pridanie align-self: flex-start k lepivému prvku nastavte výšku na auto, čo umožňovalo posúvanie a opravu.

V súčasnosti je to len podporovaný v Safari a 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 ukazuje riešenie