I'm using a flex repeater to generate multiple instances and flex container to header both flex repeater (for instances) and flex container (for header) display in the flex container. When generating a scrollbar then the mismatched header alignment.
for more info, I have added the below screenshot with the scrollbar and without the scrollbar.
No sure if this could work with the header always visible.
What I did in the past is change the overflow to visible on the flex repeater, so the scrollbar appear in the container that includes header and flex repeater
you could use position:sticky to keep the header visible. requires a canvas tho
an easier (but uglier(?)) solution would be to use overflow-y:overlay (not supported on safari browsers or older browsers)
which cases the scrollbar to "hover above" the content instead of pushing it to the side, best combined with a little margin so it doesnt obscure the content on the edge
heh it seems that an update on 30 may dissabled this feature for some reason in chrome, no idea why you have to now add in this aswell scrollbar-gutter: stable