Este hilo de Stack Overflow me daba la solución, pero me costó dar con la clave, que está en los comentarios. En resumen:
- Establece
position: sticky
ytop: 0
al elemento hijo. - 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). - 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
Origen: css – My position: sticky element isn’t sticky when using flexbox – Stack Overflowalign-self: flex-start
to the sticky element set the height to auto, which allowed scrolling, and fixed it.