title: Why does position: sticky; not work in react?
body: <p>I'm trying to make 2 sidebars sticky so when you scroll there they'll follow until the user reaches the bottom of the page.</p>
  
  <p>This is easy to implement in other programs, but it's not working in the app I'm editing right now.</p>
  
  <p>I've read all that I could on what could cause this error and this is what I've tried so far to solve this:
  changed browsers (chrome and firefox)
  added flexstart to the sticky component
  included top: value
  added height: auto
  removed flex from the parent containers and tried table, block, etc.</p>
  
  <p>The weird thing is that fixed works, but not sticky. I could always create a function to test if it's at that components height then add fixed at that height. I'd rather not do that since sticky is a much easier solution.</p>
  
  <p>This is a big project so there's a lot of code, I couldn't possibly fit it all in this post so I'll just include the element with the issue.</p>
  
  <pre><code>div.sticky {
    position: sticky;
    top: 0;
    justify-content: flex-start;
  }
  </code></pre>