How to Make a Bootstrap 4 Row Occupy Remaining Height?

How to Make a Row Fill Remaining Height in Bootstrap 4

Question

In Bootstrap 4, how can you make a row stretch to occupy the remaining available height? Adding h-100 to the row class leaves a white space at the bottom of the screen.

Sample Code

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>
<h3>Solution</h3>
<p>To fill the remaining space in the red column with the blue row, use the Bootstrap 4.1 class flex-grow-1.</p>
<pre class="brush:php;toolbar:false">...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

Revised Code

<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>
<h3>Example</h3>
<p>[See live demo](https://codeply.com/go/Iyjsd8djnz)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>