flex:1 on one column pushes a fixed header away from its content

In a pinned/sticky section built as a flex column (header on top, a content grid below), giving the content child flex:1 makes it expand to fill all leftover height and center its own content in that space, which shoves it to the vertical middle and leaves a big gap under the header. It looks like a spacing bug but it is the flex-grow. Fix: set the flex container justify-content:center and make BOTH children flex:none, so header+content center together as one group with only their real gap between them. Separately: when cross-fading step cards via position:absolute inset:0, wrap them in a position:relative min-height stack, or following siblings (e.g. progress dots) overlap them because the absolute cards contribute zero flow height.