Copy link to clipboard
Copied
Anyone else noticed css position sticky doesnt work when display: flex; is involved?
Simple example would be a:
<div>
<div>sidebar</div><div>content</div>
</div>
where both child <divs> are inside a wrapper <div> which is set to display: flex;
Setting position sticky on the sidebar <div> does nothing BUT if you ditch display: flex; and use the old float method to align the child <divs> next to each other, position sticky works fine.
Any work around for flex, haven't really looked too deeply into it, being lazy, as per usual.
Os
Edited: Same applies if css grid is used.
Edited. Ok a quick Google search came up with adding align-self: flex-start; to the container, which has sticky applied!
Copy link to clipboard
Copied
Thank you for that. Adhering to that advice will save me hours of debugging a sticky problem.
Copy link to clipboard
Copied
BenPleysier wrote
Thank you for that. Adhering to that advice will save me hours of debugging a sticky problem.
Apathy has set in today, for some reason. Thats how it is, you go from solving something relatively complex to not being able to align 2 divs side by side and make one sticky..............I'm doomed