bootstrap 4 get remaining height of parent div

bootstrap 4 get remaining height of parent div

       <div class="row h-100 flex-column">
        <div class="row">
          <div>
            <div>ROWccccccccccc 1</div>
          </div>
        </div>
        <div class="row justify-content-center align-items-center bg-blue flex-grow-1">
          <div class="text-white">ROWcccccccccccccc 2</div>
        </div>
      </div>

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray">grgrgrg</div>
  </div>
</div>

Link - https://codepen.io/anon/pen/RyQvmW?editors=1100