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

Question

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

Answer 1

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

---

Related
Bootstrap 4.0 - responsive header with image + navbar + full-height body
How to make the row stretch remaining height