7

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?

enter image description here

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • @ZimSystem posted the relevant snippet –  Feb 22 '18 at 12:49
  • @ZimSystem the only one i use is .flex-grow { flex: 1 0 auto; }, the rest are all bootstrap css. I am actually asking in general, how I should go about doing this, when I have nested container, and I want to make all the nested part fill their parents, and the parent fill the viewport height –  Feb 22 '18 at 12:55
  • Where are the 2 rows? I only see 1 in the container-fluid. Do you mean the row inside col-md-9? – Carol Skelly Feb 22 '18 at 13:00
  • the toolbar and the draw area –  Feb 22 '18 at 13:07

1 Answers1

11

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks a lot! Any idea why the error (posted a new image, will remove later) above occurs, ie the navbar does not stretch? –  Feb 23 '18 at 03:09