html flex组件没有在flex中组合：1 0自动布局

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容器。并且元素仅在其直接父级是弹性容器时才变为弹性项。你的bg-pink-300的div不是flex项目，因为它的直接父级只是一行
2. 您似乎希望使用flexbox使div自动填充可用的垂直空间。但是你所有的Flex容器都是水平容器，因此垂直方向你实际上只是依赖于百分比高度。

通常，您的主容器应该是一个垂直的flexbox，它定义了不应溢出的总垂直空间。你的面包屑，标题和粉色div都作为弹性项目进入这个容器。面包屑和标题不需要增长或缩小，它们应该具有flex：none。粉红色的div可以被定义为具有flex：1 1 0，以便在面包屑和头部切割后，它会增长和收缩以遮挡主容器内的任何空间。