My container has content that exceeds its size in both directions. To see the issue, try scrolling horizontally and vertically on the table available here:
The vertical scrollbar is visible as desired, except that it gets hidden behind the table header until you scroll down a bit.
As for the horizontal scrollbar, it only becomes visible when you reach the bottom, and then it behaves similarly to the vertical scrollbar (hiding behind the sticky column).
The reason for this behavior is clear: Both the sticky header and column have a position: absolute property and a higher z-index than the overflowing main content div.
I want both scrollbars to be constantly visible and above the sticky headers. While I doubt CSS can achieve this, there might be a solution using JS and a library like this one: https://github.com/malte-wessel/react-custom-scrollbars
The basic structure of the table is:
<div style="position: relative; overflow: hidden;">
<div style="position: absolute; z-index: 2;">Header</div>
<div style="position: relative; overflow-y: auto; width: 100%;">
<div style="position:absolute; z-index: 1;">Column</div>
<div style="overflow-x: auto; height: 100%;">
<div>Content that overflows in both directions</div>
</div>
</div>
</div>
How can I achieve this effect?