Issue with layout, vertical scrolling on body element and a table with horizontal scrolling & sticky headers

I have overflow-yauto on body and a content which contains a table. There is a div that contains the table and it has overflow-xauto for horizontal scrolling in table view. The table has a thead with positionsticky and top0.

My current issues:

1. If I add the overflow-xauto to the div table container, then the thead sticky positioning is not working (it won't stick to the table top upon y axis scrolling).
2. If I change thead to fixed position, it does work but creates another issue, it mess up the width of the thead container because fixed is based to screen viewport and not relative to parent.

Is it possible to have an element with positionsticky and allow one of the containers to have overflow-xauto without giving a fixed height?

Codesandbox

The structure is as the following:

<div className="main-container"><div className="table-container"><table><thead> <tr> <th></th></tr>  </thead> <tbody> <tr> <td></td></tr>  </tbody> </table>  </div><section className="table-footer"/></div>

.main-container {  height: 100%;  width: 100%;  display: inline-grid;}.table-container {  overflow-x: auto; //this will mess thead sticky positioning.  also tried, overflow-x: clip; - but it doesn't work..  height: 100%;  width: 100%;}table {  border-collapse: separate;  width: 100%;  table-layout: auto;  position: relative;}thead {  top: 194px;  position: sticky; //If i change to position fixed it will work but will create another issue where thead is not relative to parent and will overflow it's width.}