I am trying to make a html table with resizable headers using css resize. I want to resize the header and the table overflow with scroll. I am using a setup like this but i cant get it to work.

Any help would be greatly appriciated.
Here is the code with pictures.

.scroll {
    width: 800px;
    overflow-x: scroll;
    position: relative;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 8px;
    border: 1px solid #ccc;
    vertical-align: top;
    background-color: #f8f9fa;
}

th {
    background-color: #e9ecef;
    font-weight: bolder;
    text-align: left;
    resize: horizontal;
    overflow: hidden;
}

what i am trying to achieve

I think the problem is with the table acting like a flex div taking the max width of the parent.