use bootstrap to create fillable content divs

foo.css

#parent {
  height: 300px;
}

foo.html

<div class="container mt-5">

  <div class="row p-1 bg-primary" id="parent">
    <div class="col d-flex flex-column bg-warning">
    
      <div class="row mb-1 bg-secondary">
        <div class="col">
          I'd like this to be able to be whatever height based on the content
        </div>
      </div>
      
      <div class="row bg-secondary flex-grow-1">
        <div class="col">
          I want this to just take up the remaining height of the parent row
        </div>
      </div>
    </div>
  </div>
  
</div>