I am working on making the header row of table stick at the top as long as the table component is in the view port.

I have a table inside a table wrapper div which is inside a parent div. I need to control the horizontal scroll bar using table wrapper div by setting its overflow to auto. For vertical scroll, I want table wrapper to inherit the scroll bar from parent div by setting table wrapper's overflow to inherit or unset.

Skeleton code - https://codepen.io/shubham_687/pen/powZpNb

HTML Changes

<div class="parentWrapper">
    <div class="tableWrapper">
        <table>
            <thead>
                <tr>
                    <th class="sticky-header">num</th>
                    <th class="sticky-header">alpha</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <th>A</th>
                </tr>
                <tr>
                    <td>2</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>C</td>
                </tr>
            </tbody>
        </table>
    </div>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
</div>

CSS Changes

.sticky-header {
  z-index: 7;
  position: sticky;
  top: 0px;
}

.parentWrapper {
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
  max-height: 300px;
}

/*
This is working right now, in order to make header row sticky, have to unset both scroll bars from table wrapper
*/
.tableWrapper {
  overflow-x: unset;
  overflow-y: unset;
  position: relative;
}

/*
 Need this so that sticky header can work and also table wrapper can control horizontal scroll bar by setting max width later
*/
/*
.tableWrapper {
  overflow-x: auto;
  overflow-y: unset;
  position: relative;
}
 */

it seems overflow-x : auto overwrites the overflow-y value and control for both scroll bar goes to table wrapper div and we can access those scroll bar setting max-height and max-width for table wrapper.

If I set bother overflow-x and overflow-y to unset, both horizontal and vertical scroll bar gets controlled by parent div.

So my question is if it is possible to have overflow-x : auto with overflow-y: unset or is this combination not supported?