Bootstrap overflow y problem on table dynamic height - css

Question

I have some problem with table-responsive class because it is generating scroll on y axis when it is not indicated on the css.
Here is picture of the problem and I also replicated the bug
<div id="app">
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>N°</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<multiselect
v-model="value"
:options="options"
:multiple="true"
track-by="library"
:custom-label="customLabel"
>
</multiselect>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
https://jsfiddle.net/ggalvez92/3d8h4sqy/
I have tried to put overflow-y: visible but nothing seems to work.
I would appreciate if someone can help me to fix it.

Answer 1

If we change:
.multiselect__content-wrapper { display: contents; }
It can grow inside the table cell but affecting the table height.
Or if you use:
.table-responsive { overflow: unset; }
It can grow outside of the cell without affecting the table height.
So to fix the dropdown outside the table cell and keep overflow on the .table-responsive I don't believe this can be fixed CSS only. JavaScript solutions have been reported to:
add some bottom padding (only applicable when the dropdowns are on the last rows)
append the dropdown to the body and recalculate the offset
add position: fixed when open, and recalculate width, left and right offset
So, after some struggle with Vue (first time) I've found a solution that might suit your needs. This solution uses the position: fixed as mentioned earlier.
repositionDropdown (id){
const el = document.getElementById(id);
const parent = el.closest('.multiselect');
const content = parent.querySelector('.multiselect__content-wrapper');
const { top, height, left } = parent.getBoundingClientRect();
content.style.width = `${parent.clientWidth}px`;
content.style.position = 'fixed';
content.style.bottom = 'auto';
content.style.top = `${top + height}px`;
content.style.left = `${left}px`;
}
By adding the #open event to the setup it also requires an :id. For some reason this id needs to be numeric, I don't know why at this point. It might need some extra finetuning but at least it solves one of the bigger issues.
DEMO