Bootstrap 4 row fill remaining height and not growing

by alesoftjab

HTML

<script src="bootstrap"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="h-100 d-flex flex-column bg-yellow px-2">
  <div class="flex-column justify-content-center bg-purple px-2">    
    <div class="text-white p-0" style="height:50px">HEADER</div>
  </div>
        
  <div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">
    
      <div>Item1</div>
      <div>Item2</div>
      INNER text 1<br>
      INNER text 2<br>
    
  </div>
        
  <div class="flex-column justify-content-center bg-darkblue px-2">
    <div class="text-white p-0" style="height:50px">FOOTER</div>
  </div>        
        
</div>

CSS

html,body{height:100%;}

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-yellow {
  background: rgb(200,200,0);
}
.bg-darkblue {
  background: rgb(0,0,50);
}
.bg-red {
  background: rgb(196,50,53);
}