Element with "position: sticky" stucks in the bottom of the flex element with "overflow-y: auto" as if "overflow-y: auto" was not set.
with "overflow-y: auto":
If i get rid of flex - everything is ok:
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!
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:
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.
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".
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.
*due to display flex :P