css position sticky/flex

[osgood_]

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!

[BenPleysier]

Thank you for that. Adhering to that advice will save me hours of debugging a sticky problem.

[osgood_]

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