Comment faire en sorte qu'un Bootstrap à 4 rangées occupe la hauteur restante ?

Comment créer une hauteur restante de remplissage de ligne dans Bootstrap 4

Question

Dans Bootstrap 4, comment pouvez-vous étirer une ligne pour occuper la hauteur disponible restante ? L'ajout de h-100 à la classe de lignes laisse un espace blanc en bas de l'écran.

Exemple de 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 id="Solution">Solution</h3>
<p>Pour remplir l'espace restant dans le colonne rouge avec la ligne bleue, utilisez la classe 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>
...

Révisé 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="Exemple">Exemple</h3>
<p>[Voir la démo en direct](https://codeply.com/go/Iyjsd8djnz)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>