title: How to make the row stretch remaining height
body: <p>I'm trying to make the <code>container-fluid</code> and 2nd <code>row</code> to stretch to the remaining height but I couldn't find a way to do it.</p>
  
  <p>I have tried setting the <code>align-items/align-self</code> to <code>stretch</code> but didn't work either.</p>
  
  <p>Below is my code structure:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt; &lt;!-- I want this container to stretch to the height of the parent --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col"&gt;
              &lt;h5&gt;Header&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt; &lt;!-- I want this row height to filled the remaining height --&gt;
          &lt;widgets [widgets]="widgets" class="hing"&gt;&lt;/widgets&gt;
          &lt;div class="col portlet-container portlet-dropzone"&gt; &lt;!-- if row is not the right to stretch the remaining height, this column also fine --&gt;
              &lt;template row-host&gt;&lt;/template&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using <strong>Bootstrap 4 A6</strong>. Could someone suggest me how to make the container and the row to stretch the remaining height?</p>