Mi posición: el elemento adhesivo no es adhesivo cuando se usa flexbox

Estuve atrapado en esto por un tiempo y pensé en compartir esto position: sticky+ flexbox gotcha:

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

Expandir fragmento

JSFiddle mostrando el problema

Jun 09 '17 05:06 bholtbholt

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

Agregar align-self: flex-startal elemento adhesivo estableció la altura en automático, lo que permitió el desplazamiento y lo arregló.

Actualmente, esto es compatible con todos los principales navegadores, pero Safari todavía tiene un -webkit-prefijo y otros navegadores, excepto Firefox, tienen algunos problemas con position: stickylas tablas.

.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; /* for Safari */
  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>

Expandir fragmento

JSFiddle mostrando la solución

Jun 08 '2017 22:06 bholtbholt

En mi caso, se le había aplicado uno de los contenedores principales overflow-x: hidden;, lo que interrumpirá position: stickyla funcionalidad. Tendrás que eliminar esa regla.

A ningún elemento principal se le debe aplicar la regla CSS anterior. Esta condición se aplica a todos los padres hasta (pero sin incluir) el elemento "cuerpo".

Oct 08 '2019 23:10 TheoPlatica

Si está utilizando flex en el elemento principal, utilice align-self: flex-start para el elemento que desea convertir en adhesivo.

position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;

Jul 05 '2021 21:07 MD SHAYON