I am looking to implement a scroll bar for the first div if its content exceeds the screen size, while I want the second div to stretch along the height of the screen.
How can I enable a scrollbar for the first div when overflow: scroll; does not work?
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
padding: 0;
}
.container-fluid{
flex: 1;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid d-flex">
<div class="row flex-fill">
<div class="col-6" style="overflow: scroll;">
<form>
<table class="table">
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="col-6 bg-success">
</div>
</div>
</div>