Why does position: sticky; not work in react? [duplicate]

Question

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.

This is easy to implement in other programs, but it's not working in the app I'm editing right now.

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.

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.

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.

div.sticky {
  position: sticky;
  top: 0;
  justify-content: flex-start;
}

Answer 1

The Body element had Overflow-x: hidden; and if I removed it works.

Not sure if I can remove that, but that's what's causing my problem.