Bootstrap 4 row fill remaining height : <p>I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding <code>h-100</code> to the row class but that causes a white space at the bottom of the screen. There must be a way to do it but I'm totally stumped.. Here is my code: </p>

<pre><code>&lt;div class="container-fluid h-100"&gt;
  &lt;div class="row justify-content-center h-100"&gt;
    &lt;div class="col-4 bg-red"&gt;
      &lt;div class="h-100"&gt;
        &lt;div class="row justify-content-center bg-purple"&gt;
          &lt;div class="text-white"&gt;
            &lt;div style="height:200px"&gt;ROW 1&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row justify-content-center bg-blue"&gt;
          &lt;div class="text-white"&gt;ROW 2&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-8 bg-gray"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>codepen: <a href="https://codepen.io/ee92/pen/zjpjXW/?editors=1100" rel="noreferrer">https://codepen.io/ee92/pen/zjpjXW/?editors=1100</a></p>

<p><a href="https://i.stack.imgur.com/yNiBk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yNiBk.png" alt="enter image description here"></a></p>

<p>I'd like to make the the blue row (ROW 2) fill all the red space. Any suggestions?</p>

<p>Thanks</p>
