html flex 组件未组合在 flex : 1 0 auto layout

Question

我使用以下 HTML 构建了一个着陆页。

我也有carefully constructed a bootply ，准确显示了粉红色 div 如何扩展得太远，没有按预期覆盖屏幕。

https://www.bootply.com/bYlAS71OWw

我有一个粉红色区域，它应该调整大小以占用填充浏览器的可用空间，但不会创建滚动条。

面包屑和标题似乎没有从使用的整体区域中减去。

• heading 在 col 中，并且是 flex，
• .breadcrumb 是 flex 的。

页面为标题和面包屑的组合高度创建滚动条。

<app-dashboard>
  <div class="app-body">

    <main class="main">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#/">Home</a>

        </li>
        <li class="breadcrumb-item active">
          <span tabindex="0">Property Locations</span>
        </li>    
      </ol>

      <div class="container-fluid d-flex h-100">
        <router-outlet></router-outlet>
        <ng-component class="d-flex flex-grow w-100">
          <div class="row w-100">
            <div class="col">
               HEADING    
            </div>
            <div class="d-flex flex-grow bg-pink-300 h-100 w-100">
              THIS SHOULD GROW, BUT NOT CREATE A SCROLLBAR
            </div>
          </div>
        </ng-component>
      </div>
    </main>

  </div>
  <footer class="app-footer">
    <span>
      <a href="..."></a>Pander.</span>
    <span>
      <i class="fa fa-fw fa-code-fork"></i>
    </span>
  </footer>
</app-dashboard>

flex-grow 的 CSS 是:

.flex-grow {
  flex: 1 0 auto;
}

Answer 1

请简化示例(例如删除自定义标签)。我只粗略地了解您要实现的目标，但首先要了解一些事情:

1. 增长和收缩的是 flex 元素，而不是 flex 容器。当一个元素的直接父元素是一个 flex 容器时，它才会成为一个 flex 元素。您带有 bg-pink-300 的 div 不是 flex 元素，因为它的直接父级只是一个行
2. 您似乎想使用 flexbox 让您的 div 自动填充可用的垂直空间。但是您所有的 flex 容器都是水平容器，因此在垂直方向上您实际上只依赖于百分比高度。

一般来说，你的主容器应该是一个垂直的 flexbox，它定义了不应该溢出的总垂直空间。你的面包屑、标题和粉红色的 div 都作为 flex 元素进入这个容器。 Breadcrumb 和 header 不需要增长或收缩，它们应该有 flex: none。粉红色的 div 可以定义为具有 flex: 1 1 0 以便它在面包屑和标题被削减后增长和收缩以吸收主容器内的任何空间。