html - Bootstrap 4 使嵌套行填充已使用 flex-grow 填充视口(viewport)高度的父级

Question

目前，我有一个 (class="d-flex flex-column") 包含一个导航栏和一个容器，这个容器包含一个 (class="d-flex flex-column") 以及包含两行.我使用 flex-grow 使我的容器填满页面。我希望再次使用 flex-grow 在此嵌套容器中创建第二行以填充其父容器，但它不起作用。在 Bootstrap v4 中如何使用 flex-grow 使嵌套元素增长以填充已填充视口(viewport)高度的父元素？

我不应该结合 flex 和容器来做我想做的事吗？如果是这样，我应该怎么做？

当我执行以下操作时，当容器扩展以填充高度时，容器内的行只保持相同的高度，它不会相应地扩展。

<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>

更新 使用@ZimSystem 代码时出现如下错误。我该如何解决？

Answer 1

我想你只需要记住 flex-grow 适用于 display:flex 的 child ，而不是 parent 。因此，如果父级也是子级，则 flex-grow 将起作用。

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

在你的例子中，<div class="container-fluid flex-fill"></div>也应该是 d-flex这样你就可以使用 flex-grow 让它的 child 长高，然后继续到绘图区域。

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>

---

注意:flex-fill 实用程序类将包含在下一个 Bootstrap 4.1 版本中:https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

这是另一个带有可滚动右列和顶部导航栏的示例: https://codeply.com/p/93751rK5WQ

---

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