I am currently working on creating a scrollable tbody within a flexbox layout.
I have two flexboxes, each containing a table.
When the items in the table overflow, I want to display a vertical scrollbar within the tbody.
However, the tables are within flexboxes that do not have a fixed height.
What steps should I take to enable the vertical scrollbar within the tbody?
.root {
background-color:green;
width: 200px;
height: 200px;
display: flex;
flex-flow:column nowrap;
}
.container1 {
display: flex;
flex-grow:4;
background-color:yellow;
}
.container1 tbody {
overflow: auto;
}
.container2 {
display: flex;
flex-grow:3;
background-color:blue;
}<div class="root">
<div class="container1">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class="container2">
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
<tr>
<td>jhon</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>Please feel free to reach out if you require additional information. Thank you.