My position: sticky element isn't sticky when using flexbox

I was stuck on this for a little bit and thought I'd share this position: sticky + flex box gotcha:

position: sticky

My sticky div was working fine until I switched my view to a flex box container, and suddenly the div wasn't sticky when it was wrapped in a flex box parent.

.flexbox-wrapper {
display: flex;
height: 600px;
}
.regular {
background-color: blue;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: red;
}

This is the regular box

This is the sticky box

</div>

JSFiddle showing the problem

Does this behavior persist across all browsers that support position: sticky or just one/some?
– TylerH
Jun 12 '17 at 19:06

position: sticky

@TylerH I believe it's all browsers. It functioned like this in both Chrome and Safari.
– BHOLT
Jun 12 '17 at 19:52

Thanks. I can confirm the problem and solution occur in Firefox, too.
– TylerH
Jun 12 '17 at 19:55

1 Answer
1

Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.

stretch

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

align-self: flex-start

Currently this is only supported in Safari and Edge

.flexbox-wrapper {
display: flex;
overflow: auto;
height: 200px; /* Not necessary -- for example only */
}
.regular {
background-color: blue; /* Not necessary -- for example only */
height: 600px; /* Not necessary -- for example only */
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
align-self: flex-start; /* <-- this is the fix */
background-color: red; /* Not necessary -- for example only */
}

This is the regular box

This is the sticky box

</div>

JSFiddle showing the solution

Some code to accompaign your answer would be really helpful for visual guys like me :)
– Roko C. Buljan
Jun 8 '17 at 23:05

@RokoC.Buljan added the code example and JSFiddles. Thanks for the feedback!
– BHOLT
Jun 12 '17 at 19:02

sticky does not works well across browsers...
– Roko C. Buljan
Jun 12 '17 at 22:45

sticky

for me align-self: flex-start; did the trick, using overflow and height could lead into sticky not working check blog.cloud66.com/position-sticky-problem
– ctf0
Dec 3 '17 at 12:25

align-self: flex-start;

@ctf0 that's right. align-self: flex-start is the fix. overflow and height were added simply for the example. They're not required for this.
– BHOLT
Dec 4 '17 at 23:40

align-self: flex-start

overflow

height

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.