Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow

html css flexbox bootstrap-4

12,355

I think you just need to remember that flex-grow applies to the child of display:flex, and not the parent. Therefore, if the parent is also a child flex-grow will work.

.flex-fill {
    flex: 1 1 auto;
}

In your case, <div class="container-fluid flex-fill"></div> should also be d-flex so that you can use flex-grow to have it's children grow in height, and then continue this down to the drawing area.

https://codeply.com/go/gT3jsg43Lv

<div class="d-md-flex flex-column h-100">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
        <button class="btn btn-outline-success" type="submit">Logout</button>
    </nav>
    <div class="container-fluid d-flex h-100">
        <div class="row flex-grow">
            <div class="col-md-9">
                <div class="row h-100">

                    <div class="col-md-12 d-flex flex-column flex-grow">
                        <div class="btn-toolbar justify-content-between" id="label-toolbar">
                            <div class="btn-group">
                                <select class="form-control form-control-sm" id="label-option">
                                    <option>Main</option>
                                    <option>Unknown</option>
                                </select>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-outline-success btn-sm" id="previous-button">Previous</button>
                                <button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
                            </div>
                        </div>

                        <div id="draw-area" class="flex-grow bg-warning"> draw area </div>

                    </div>
                </div>
            </div>
            <div class="col-md-3 label-sidebar"></div>
        </div>
    </div>
</div>

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

Here's another example with scrollable right column, and top navbar: https://codeply.com/p/93751rK5WQ

12,355

Author by

Admin

Updated on July 27, 2022

Comments

Admin almost 2 years

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?

Should I not combine flex and container to do what I want? If so, how should I do this?

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.

<div class="d-md-flex flex-column h-100">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <button class="btn btn-outline-warning mr-auto" type="submit">Back</button>
      <button class="btn btn-outline-success" type="submit">Logout</button>
    </nav>

    <div class="container-fluid flex-grow">

      <div class="row">
        <div class="col-md-9">
          <div class="row">

            <div class="col-md-12">
              <div class="btn-toolbar justify-content-between" id="label-toolbar">
                <div class="btn-group">
                  <select class="form-control form-control-sm" id="label-option">
                    <option>Main</option>
                    <option>Unknown</option>
                  </select>
                  <button type="button" class="btn btn-outline-primary btn-sm" id="create-button">Create</button>
                  <button type="button" class="btn btn-outline-primary btn-sm" id="delete-button">Delete</button>
                  <button type="button" class="btn btn-outline-primary btn-sm" id="edit-button">Edit</button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-outline-success btn-sm" id="previous-button">Previous</button>
                  <button type="button" class="btn btn-outline-success btn-sm" id="next-button">Next</button>
                </div>
              </div>

              <div id="draw-area"></div>

            </div>
          </div>
        </div>

        <div class="col-md-3 label-sidebar"></div>
      </div>

    </div>

  </div>

Update The following error occurs when using @ZimSystem code. How should I solve this?