I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect that the issue may be related to the parent div using flex-frow-1, but I can't seem to figure it out.
<div class="vh-100 d-flex flex-column">
<div class="d-flex flex-column col-12 col-xl-5 col-lg-5 col-md-5 h-100 bg-primary">
<fieldset class="border border-2 border-bottom-0 rounded-top">
<legend class="w-auto px-2 float-none mb-0 fs-5 text-start">
label
</legend>
</fieldset>
<div class="flex-grow-1 border border-2 border-top-0 rounded-bottom">
<div class="rounded overflow-auto h-92">
<table
class="table table-hover text-center rounded p-0 m-0 overflow-auto"
>
<thead class="bg-primary text-white">
<tr>
<th class="fw-bold">name</th>
<th class="fw-bold">age</th>
</tr>
</thead>
<tbody>
<!-- Table content here -->
</tbody>
</table>
</div>
<div class="col-8 d-flex justify-content-around mt-2">
<button class="py-1 px-0 btn primary-button col-5">button 1</button
><button class="py-1 px-0 btn primary-button col-5">button 2</button>
</div>
</div>
</div>
</div>
My goal is to create a specific layout where one div has a height of 90vh. Within this div, there should be another div that takes up 100% of the height. The first inner div should occupy 90% of the height and become scrollable when overflowing, while the second div fills the remaining space.