angular - 将 div 放置到 angular-material-dialog 的底部

Question

我不能将具有按钮的 div 放在底部，当我的表格增加时，div 会移到我的对话框之外！

包含按钮的 div 已移到外部。 当没有数据时，它会更靠近对话框的中心。

<div fxLayout="column" fxLayoutAlign="space-between stretch" style="height: 100%;">
  <div class="title" mat-dialog-title>
    <h1 fxLayout="row" fxLayoutAlign="start center">Title</h1>
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <mat-radio-group>
        <mat-radio-button>first</mat-radio-button>
        <mat-radio-button>second</mat-radio-button>
      </mat-radio-group>
      <div>
        <mat-form-field>
          <mat-label>Search...</mat-label>
          <input matInput type="text">
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
      </div>
    </div>
  </div>
  <div class="content" mat-card-content style="flex-grow: 1;">
    <div>
      <angular-tree-table [tableData]="tableData"></angular-tree-table>
    </div>
  </div>
  <div class="bottom" fxFlex>
    <mat-card-actions mat-dialog-actions fxLayout="row wrap" fxLayoutAlign="space-between">
      <button mat-button fxFlexAlign="start center">close</button>
      <button mat-button fxFlexAlign="end center" cdkFocusInitial>save</button>
    </mat-card-actions>
  </div>
</div>

::ng-deep .mat-dialog-container {
  overflow-y: hidden !important;
}

.title {
  display: inline-block;
}

.content {
  display: inline-block;
}

.bottom {
  display: inline-block;
  vertical-align: bottom;
}

当我打开对话框时，我传递参数：

openDialog(): void {
    this.entities = [];
    this.dialog.open(EntitiesDialogComponent, {
      width: '100%',
      height: '80%',
      restoreFocus: false,
      data: {entity: this.entity}
    });
  }

为什么会发生？如何解决问题并修复 div？

PS：如果删除

::ng-deep .mat-dialog-container {
  overflow-y: hidden !important;
}

然后我们可以使用滚动到底部 div。但我不需要它，按钮必须固定在底部。

标签： angulartypescriptangular-material