Bootstrap 4 row填充剩余高度问题：添加h-100出现底部空白

我现在在Bootstrap 4里遇到个问题：想让某个row元素填满容器的剩余可用高度，给它加了h-100类之后，屏幕底部反而出现了空白区域。我希望蓝色的ROW 2能完全填满红色的父容器区域，以下是我的代码：

<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 style="height:200px">ROW 1</div> 
          </div> 
        </div> 
        <div class="row justify-content-center bg-blue"> 
          <div class="text-white">ROW 2</div> 
        </div> 
      </div> 
    </div> 
    <div class="col-8 bg-gray"></div> 
  </div> 
</div>

恳请各位大佬给我一些解决建议，谢谢！

内容的提问来源于stack exchange，提问作者Egor