ブートストラップ 4 列が残りの高さを占めるようにするにはどうすればよいですか?

Bootstrap 4 で行を埋める残りの高さを作成する方法

質問

Bootstrap 4 で、行を拡張して領域を占めるようにするにはどうすればよいですか?残りの利用可能な高さは?行クラスに h-100 を追加すると、画面の下部に空白が残ります。

サンプル コード

<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>解決策</h3>
<p>残りの空白を埋めるには赤い列と青い行。Bootstrap 4.1 クラスを使用します。 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>
...

改訂されたコード

<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>例</h3>
<p>[ライブデモを参照](https://codeply.com/go/Iyjsd8djnz) )</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>