CSS property 'resize' doesn't work with 'sticky' - css

Question

I've created a grid-based table replacement.
The grid is meant to keep table headers on the top when scrolling, for that I've utilized position: sticky;.
While it works flawlessly, it doesn't seem to care if I set resize: horizontal; on it, it just won't let me - I can have either, but not both.
Is there a workaround? Sorry if I don't post the HTML code, it's generated by vue and it's rather unreadable, plus I would have to post vue component contents.
Here's SASS thought:
.table {
display: grid;
overflow-y: scroll;
grid-template-columns: repeat(var(--columnCount), minmax(min-content, 1fr));
max-height: 100px;
}
.table-headers {
display: contents;
top: 0;
}
.table-headers > .table-header:last-of-type > .table-header-resizer {
display: none;
}
.table-header {
top: 0;
display: flex;
position: sticky;
font-weight: 700;
border-right: 1px solid #D5E3EA;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid #D5E3EA;
background: #F7F7F7;
}
.table-header:last-of-type {
border-right: none;
}
.table-header-cell {
display: flex;
flex-grow: 1;
resize: horizontal;
padding: 8px;
}
.table-row {
display: contents;
}
.table-row > .table-cell {
background: #f4f4f4;
border-top: 1px solid #D5E3EA;
}
.table-row > .table-cell:nth-of-type(even) {
background: #f2f2f2;
}
.table-cell {
display: flex;
flex-grow: 1;
padding: 8px;
border-right: 1px solid #D5E3EA;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.table-cell:last-of-type {
border-right: none;
}
<div class="table" style='--columnCount: 3;'>
<div class="table-headers">
<div class="table-header">
<div class="table-cell">
One
</div>
</div>
<div class="table-header">
<div class="table-cell">
Two
</div>
</div>
<div class="table-header">
<div class="table-cell">
Three
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
<div class="table-row">
<div class="table-cell">
One
</div>
<div class="table-cell">
Two
</div>
<div class="table-cell">
Three
</div>
</div>
</div>

Answer 1

If you have the same issue, simply put a nested child inside your sticky element and set resize on it instead.