position: sticky not working in firefox

It sticks if you specify a top value:

.sticky{
   position: -webkit-sticky; /* for safari */
   position: sticky;
   width: 200px;
   float: left;
   top: 10px;
}

fiddle

I have the same issue in 2020 - this post pops up first in google but none of the answers helped me.

The actual problem was that sticky doesn't play well with the parent element being display: flex.

References:
- position: sticky, works in Chrome but not in Firefox
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080

Related