The scroll bar and stretched to the height of the screen

I need the scroll bar to appear in the first div if its contents are higher than the screen size. And the second div was stretched along the height of the screen.

How can I add a scrollbar to the first div? "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>