Highlighted

css position sticky/flex

LEGEND ,
Jul 09, 2019

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!

Views

101

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

css position sticky/flex

LEGEND ,
Jul 09, 2019

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!

Views

102

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 09, 2019 0
Adobe Community Professional ,
Jul 09, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2019 1
osgood_ LATEST
LEGEND ,
Jul 09, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2019 0