title: Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
body: <p>Currently, I am have a (class="d-flex flex-column") containing a navbar and a container and this container contains a (class="d-flex flex-column") as well that contains two rows. I use flex-grow to make my container fill the page. I wish to make the second row in this nested container to fill its parent using flex-grow again but it doesn't work. How do I make a nested element grow to fill a parent that has been made made to fill the viewport height using flex-grow in Bootstrap v4?</p>
  
  <p>Should I not combine flex and container to do what I want? If so, how should I do this?</p>
  
  <p>When I do the following, while the container expand to fill the height, the row within the container just stay the same height, it doesn't expand accordingly.</p>
  
  <pre><code>&lt;div class="d-md-flex flex-column h-100"&gt;
      &lt;nav class="navbar navbar-expand-md navbar-dark bg-dark"&gt;
        &lt;button class="btn btn-outline-warning mr-auto" type="submit"&gt;Back&lt;/button&gt;
        &lt;button class="btn btn-outline-success" type="submit"&gt;Logout&lt;/button&gt;
      &lt;/nav&gt;
  
      &lt;div class="container-fluid flex-grow"&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-md-9"&gt;
            &lt;div class="row"&gt;
  
              &lt;div class="col-md-12"&gt;
                &lt;div class="btn-toolbar justify-content-between" id="label-toolbar"&gt;
                  &lt;div class="btn-group"&gt;
                    &lt;select class="form-control form-control-sm" id="label-option"&gt;
                      &lt;option&gt;Main&lt;/option&gt;
                      &lt;option&gt;Unknown&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;button type="button" class="btn btn-outline-primary btn-sm" id="create-button"&gt;Create&lt;/button&gt;
                    &lt;button type="button" class="btn btn-outline-primary btn-sm" id="delete-button"&gt;Delete&lt;/button&gt;
                    &lt;button type="button" class="btn btn-outline-primary btn-sm" id="edit-button"&gt;Edit&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="btn-group"&gt;
                    &lt;button type="button" class="btn btn-outline-success btn-sm" id="previous-button"&gt;Previous&lt;/button&gt;
                    &lt;button type="button" class="btn btn-outline-success btn-sm" id="next-button"&gt;Next&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div id="draw-area"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-3 label-sidebar"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>Update</em></strong>
  The following error occurs when using @ZimSystem code. How should I solve this?</p>
  
  <p><a href="https://i.stack.imgur.com/ZaRFq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZaRFq.png" alt="enter image description here"></a></p>