Scroll Bar Issue

Code Link: https://github.com/ramkumar2325/DataTable_Sample

I have uploaded source code here, I'm trying setup vertical scroll bar based on the example given.

let table = $('#agentSelectionTable').DataTable({
data: availableAgents,
scrollCollapse: true,
scrollY: '50vh',
"columns": [{
"data": "userName"
},
{
"data": "firstName"
},
{
"data": "lastName"
},
{
"data": "startDate"
},
{
"data": "endDate"
},
{
"data": "replacementAgent"
},
{
"data": "comment"
}
],
columnDefs: [{
targets: 6,
render: $.fn.dataTable.render.ellipsis(20)
}],
"createdRow": function (row, data, index) {
if (data.replacementAgent != "") {
$('td', row).eq(5).addClass('highlight');
}
}
});

Issue is: Column header shrinking (attached screenshot for reference)
Scenario is: from the screenshot you can see page design and I'm loading Datatable in one of the DIV on right bottom. I've 2 monitor's. On one monitor i can see all 10 rows and on second monitor i can see only 5 rows so when i move page from one screen to another screen i'm resizing the screen so i need to setup scrollY param value dynamically.

Question: how to setup the scrollY value dynamically when resizing the page and why the column header is shrinking

Please help me with this issue.

Thanks,
Kumar