css - container - Mi posición: el elemento adhesivo no es adhesivo cuando uso flexbox

inline flex

Question

Estuve atrapado en esto por un momento y pensé en compartir esta position: sticky + flex box gotcha:

Mi div pegajoso funcionaba bien hasta que cambié mi vista a un contenedor de caja flexible, y de repente el div no estaba pegajoso cuando estaba envuelto en un padre de caja 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 mostrando el problema

Answer 1

Dado que los elementos del cuadro flexible se stretch por defecto, todos los elementos tienen la misma altura, por lo que no se puede desplazar.

Agregar align-self: flex-start al elemento adhesivo establece la altura en auto, lo que permitió el desplazamiento y lo arregló.

Actualmente, esto solo es supported con Safari y 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 mostrando la solución