부트스트랩 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>