📌 Cómo hacer que una columna se quede fija hasta igualar a otra: posición Sticky con flexbox

Este hilo de Stack Overflow me daba la solución, pero me costó dar con la clave, que está en los comentarios. En resumen:

  1. Establece position: sticky y top: 0 elemento hijo.
  2. Establece al elemento hijo (o sea, las columnas), align-self: flex-start para que no ocupen todo el alto (si no, no habrá nada que scrollear.
  3. Revisa que no haya ningún elemento ascendiente con overflow: hidden.

Since flex box elements default to stretch, all the elements are the same height, which can’t be scrolled against. Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Origen: css – My position: sticky element isn’t sticky when using flexbox – Stack Overflow

¿Te gusta?