FlexBox 的内联 fxFlex 既不会增长 children 来匹配容器，也不会对齐 children

Question

我正在尝试使用内联 fxFlex 和 fxLayoutAlign 在 Node.js Angular 中使用 FlexBox 创建一个简单的 HTML 结构。主要问题是 fxFlex 没有拉伸元素以匹配容器，fxLayoutAlign 没有为 children 提供正确的布局。也许这两个问题是相关的。

我有一套组件，代码见下。仪表板组件目前的布局有 3 children。然而，children 不会拉伸以适合容器。此外，我无法使用 fxLayoutAlign 将 children 与 space-between 对齐。 header 组件也有 fxLayoutAlign，在这里它工作得很好。

仪表板的 children 之一是另一个组件，称为 quest-list。该组件包含一个“任务”列表，其大小可能会有所不同，这会导致容器可滚动并溢出。但是，除非我以像素为单位指定 quest-list 的确切高度，否则它不会伸展以适应任何 children.

Stackblitz of the problem here

到目前为止，我的代码包含以下组件（使用 Angular Material，用于编码时的一些视觉反馈）：

main-page.component.html:

<div fxLayout="column" fxFlex="100" fxLayoutGap="10px" class="main-container">
  <header></header>
  <dashboard fxFlex="grow"></dashboard>
</div>

header.html:

<mat-toolbar fxFlex fxLayoutAlign="space-between center" fxLayout="row" class="mat-elevation-z1" fxLayoutGap="20px">
  <div fxFlex="nogrow">
    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item *ngFor="let button of buttons" (click)="navigate(button.link)">
        <mat-icon>{{button.icon}}</mat-icon>
        <span>{{button.text}}</span>
      </button>
    </mat-menu>
  </div>
  <div fxLayout="row" fxFlex=nogrow fxLayoutGap="10px" fxLayoutAlign=" center">
    <div fxFlex>Username</div>
    <mat-icon fxFlex>account_circle</mat-icon>
  </div>
</mat-toolbar>

仪表板。component.html:

<div fxFlex="grow" fxLayout="column" *ngIf="loading==false" fxLayoutGap="20px" fxLayoutAlign="space-between center">
  
  <div fxFlex>
    {{getNameWithTitle()}}
  </div>

  <div fxFlex>
    {{getLevelWithCharacter()}}
  </div>
  
  <quest-list fxFlex
              class="quest-list"
              title="Quests"
              [quests]="quests"
              [showOnlyUserQuests]="true">
  </quest-list>

</div>

quest-list.component.html:

<mat-card fxFlex fxLayout="column" fxLayoutGap="20px" fxLayoutAlign=" center" class="quest-list-container">
  <div class="title" fxFlex="nogrow">
    {{title}}
  </div>
  <div fxFlex fxLayout="column" fxLayoutGap="10px" class="overflow-container">
      <mat-accordion *ngFor="let quest of quests">
        <mat-expansion-panel hideToggle>
          
          <mat-expansion-panel-header>
            <mat-panel-title fxFlex="nogrow">
              <img *ngIf="quest.skill.image" [src]="quest.skill.image.image">
              <mat-icon *ngIf="!quest.skill.image" fxFlex>not_interested</mat-icon>
            </mat-panel-title>
            <mat-panel-description fxFlex fxLayoutAlign="space-between center">
              {{quest.name}}
              <mat-icon>arrow_right</mat-icon>
            </mat-panel-description>
          </mat-expansion-panel-header>

          <p fxFlex>
            {{quest.description}}
          </p>

        </mat-expansion-panel>
      </mat-accordion>
  </div>
</mat-card>

quest-list-component.scss:

.quest-list-container {
    background-color: lightskyblue;
}

.overflow-container {
    overflow-y: scroll;
}

问题图片：

Without pixel height

With fxFlex="600px for <quest-list>

(使用全局样式：@import '~@angular/material/prebuilt-themes/indigo-pink.css';

我发现这个问题非常令人沮丧，因为我确信解决方案非常简单。但由于我现在已经花了几个小时查看它，仍然看不出问题所在，我希望这里有人能提供帮助。

提前致谢。

Answer 1

问题是，如果您只是在 overflow-container 上使用 fxFlex，它将添加一种样式：flex: 1 1 0.0000001%，结合您的 overflow-scroll 这将导致容器折叠到尽可能小的尺寸。如果将其更改为 fxFlex="auto"，它看起来会好一些。

但是，我想这不是您想要的全部。我猜你希望它只滚动内部区域，而不是整个页面。这也需要相当多的改变。从 body 元素开始，父元素上有很多 height: 100%。几个元素上的一对 min-height: 0，将 fxFlex 指令设置为 auto 并删除 .main-container 上的 fxFlex="100"。因为，如果您向元素添加 fxFlex，父元素将自动附加 display: flex，即使那不是我们想要的。

我做了一个完全可用的 stackblitz here

就我个人而言，我已经放弃了 angular 中的 fxLayout 包。使用这个包时你会做出一定的速度牺牲，在 99% 的情况下你可以只使用一些实用程序类。对于剩下的 1%，您可以使用其他方式。

FlexBox 的内联 fxFlex 既不会增长 children 来匹配容器，也不会对齐 children

Inline fxFlex for FlexBox neither growing children to match container, nor aligning children

html

css

angular

flexbox

angular-flex-layout