I'm currently using this HTML code, and it's functioning correctly. However, I would like the height of the div to adjust dynamically based on the tab's content, rather than specifying a fixed height of 200px. Using a percentage value for the height doesn't seem to work in this case. Please note that the draggable feature is from a third-party source.
<b-tab title="TAB">
<div class="table-wrapper-scroll-y custom-scrollbar">
<table class="table table-sm table-bordered table-striped table-hover">
<draggable :list="myLoop" :options="dragOptions" :element="'tbody'" class="rows">
<tr class="cursor-ns-resize" v-for="(row, index) in myLoop" :key="index">
<td>
<b-form-checkbox type="checkbox" v-model="row.checked" />
</td>
<td>
<span>{{ row.label }}</span>
</td>
</tr>
</draggable>
</table>
</div>
</b-tab>
CSS
.custom-scrollbar {
position: relative;
height: 200px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}