HTML, CSS: Make table vertically scrollable - html

Question

I have a table that is dynamically created after an AJAX request (using vue.js). The number of columns and width of each column is calculated.
My problem is, that there should be a vertical scrollbar when theres not enough space in the table, but even when setting style="width: 600px; overflow-x: scroll" no scrollbar shows up and the header elements gets shrinked together to the width of the wrapper div and the table rows get clipped.
Heres my relevant code (using bootstrap and vue.js 2):
<div class="panel-body" id="datatable">
<table class="table data-table" id="datatable-content">
<thead class="datatable-head" id="datatable-head">
<tr>
<th v-for="value in tableHeader" v-text="value"></th>
</tr>
</thead>
<tbody class="datatable-body" id="datatable-body">
<tr v-for="row in tableRows">
<td v-for="key in tableHeader" v-html="highlightFilterString(row[key])"></td>
</tr>
</tbody>
</table>
</div>
and the css:
.data-table {
overflow-x: scroll;
display: block;
width: 100%;
}
.datatable-body {
display:block;
height: calc(100vh - 118px);/
overflow-y: scroll;
overflow-x: hidden;
}
.datatable-head {
display:block;
overflow-x: scroll;
}
.datatable-head, .datatable-body tr {
min-width: 100px;
text-align: center;
}
.datatable-body td {
min-width: 100px;
text-align: center;
}
.datatable-head th {
min-width: 100px;
text-align: center;
}
What is the problem here?

Answer 1

I commented out the overflow-x element and it seems to be working fine now. Made fiddle with static html content
https://jsfiddle.net/v7qpot2b/
.datatable-body {
display:block;
height: calc(100vh - 118px);/
overflow-y: scroll;
/* overflow-x: hidden; */
}