position: sticky not working in firefox

Question

position:sticky is said to be working in firefox but I'm not seeing my sidebar stick.

My html looks like this:

<div class="wrap">

    <div class="sticky">side </div>    
    <div class="content">content <div>
<div>

My css:

.content{
    height: 2000px;
    overflow: hidden;
}

.sticky{
    position: sticky;
    width: 200px;
    float: left;
}

As I scroll down the sidebar scrolls with the content. It doesn't stick. Anyone know what could be the issue?

Answer 1

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

Answer 2

It sticks if you specify a top value:

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

fiddle