如何讓Bootstrap 4行佔據剩餘高度？

如何在Bootstrap 4 中使行填充剩餘高度

問題

在Bootstrap 4 中，如何使行拉伸以佔據剩餘高度剩餘可用高度？將 h-100 新增至 row 類別會在螢幕底部留下一個空白。

範例程式碼

<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="解">解</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 id="範例">範例</h3>
<p>[查看現場示範](https://codeply.com/ go/Iyjsd8djnz )</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>