Wie kann man dafür sorgen, dass ein 4-reihiger Bootstrap die verbleibende Höhe einnimmt?

Wie man in Bootstrap 4 eine Zeile dazu bringt, die verbleibende Höhe auszufüllen

Frage

Wie kann man in Bootstrap 4 dafür sorgen, dass eine Zeile die verbleibende Höhe ausfüllt verbleibende verfügbare Höhe? Das Hinzufügen von h-100 zur Zeilenklasse hinterlässt einen Leerraum am unteren Bildschirmrand.

Beispielcode

<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 id="Lösung">Lösung</h3>
<p>Um den verbleibenden Platz im zu füllen Rote Spalte mit der blauen Zeile, verwenden Sie die Bootstrap 4.1-Klasse 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>
...

Überarbeitet 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 id="Beispiel">Beispiel</h3>
<p>[Live-Demo ansehen](https://codeply.com/go/Iyjsd8djnz)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>