"position:sticky" does not work correctly in flex item

• Component: CSS
• Status: RESOLVED WORKSFORME

[Ivan Poluyanov]

Element with "position: sticky" stucks in the bottom of the flex element with "overflow-y: auto" as if "overflow-y: auto" was not set.

Examples:

with "overflow-y: auto":
https://jsfiddle.net/4hwgfz4z/

without:
https://jsfiddle.net/ed95kw7x/

If i get rid of flex - everything is ok: 
https://jsfiddle.net/6bu8kua5/

Firefox and Chrome handle this case(https://jsfiddle.net/4hwgfz4z/) correctly, element stops in the bottom of scrollable element.

I'm just running up against this as well, and it's pretty tough.

Here is an additional example that illustrates the issue as well: https://jsbin.com/femamusete/2/edit?html,css,output

If there are any known workarounds, I'd appreciate the knowledge share!

[Jonathan Cammisuli]

I'd like to add some more information for this bug. 


In my case, I have a layout that has has two panels. Left and Right, like so:
https://codepen.io/anon/pen/LQLjKO

Green area, should stick to the top with 0, gray row should stick to the top by 3.5rem.

When scrolling, the green area stays for what appears to be the height of the container, then scrolls away. The interesting thing here, is that the gray area stays in it's designation sticky spot, no matter what. Also note, that I have left: 0 on the pink area, and the green area, so that horizontal scrolls stick those elements.

By trying the above example on either Chrome or Firefox, we can see that it's working there, with no issues.

[jonjohnjohnson]

[e-mail]
[e-mail]
[e-mail]

As far as work arounds, all of your examples could be "fixed" by putting another element inside the scrolling element that wraps around all the contents. This effectively acts as a containing block for any sticky elements inside the "scrollport". Give it a min-height to match the scroller if you want. Otherwise use display flex on each.

This is due to sticky positioning as a feature, being quite underspecified. And though firefox/chrome, allow a scrolling elements "scrollHeight" to be used for wrapping sticky elements, safari (I think) uses the scrolling elements "clientHeight" to analyze the "sticky constraint rectangle".

Demo #2 -> http://usefulangle.com/post/40/javascript-client-height-vs-offset-height-vs-scroll-height

The spec is unclear if Safari should match other implementations, but for interop, I hope they do.

Just to reiterate, this isn't do to display flex.

[jonjohnjohnson]

*due to display flex :P

[Martin Robinson]

I have tested https://jsfiddle.net/4hwgfz4z/ with async overflow both on and off and the green header seems to stick properly in Safari, STP, and WebKit trunk. Is anyone able to confirm that the is still an issue?

[Martin Robinson]

I think this is working now, perhaps fixed by other improvements to position:sticky. I'm going to close it, but feel free to comment if it's still an issue.