Show Scrollbars On Top Of Position:absolute Header

I've got a wrapper with content that is larger than it in both directions. Try scrolling in either direction on the table here: https://we-flow.github.io/react-sticky-table/ The ve

Solution 1:

I think perhaps this structure would be simpler and get you what you want. Remove a few layers of nesting and use margins.

<divstyle="position: relative; overflow: hidden;"><divstyle="position: relative; overflow: auto; width: 100%;"><divstyle="position: absolute; z-index: 2;">Header</div><divstyle="position:absolute; z-index: 1;">Column</div><divstyle="margin: header-size 0px 0px cell-size;"height:100%;"><div>Content that overflows in both directions</div></div></div></div>

If you absolutely have to stick with the structure you have, then, yes, you could use javascript to change the width of the header when the content is scrollable to fix the vertical scroll bar being obscured, but there's nothing you can do about the horizontal scroll bar in your current format, because the container that's scrolling in the y direction isn't the same as the one that's scrolling in the x direction.