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