Bootstrap 4 使嵌套行填充父项已使用 flex-grow 填充视口高度

Question

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

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

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

<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，而不是父母。因此，如果父母也是孩子 flex-grow 将起作用。

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

在你的情况下，<div class="container-fluid flex-fill"></div>也应该是d-flex这样你可以使用 flex-grow 让它的孩子身高增长，然后继续这个到绘图区域。

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 - 带有图像 + 导航栏 + 全高正文的响应式标题
如何使行拉伸剩余高度