FF 中的 Angular mat-tab 和 mat-table 滾動問題

Question

我在 mat-tab 中有一個表格，它可以擴展到它需要的任何高度，並且在達到面板的最大高度時不顯示滾動條。 mat-tab-group 將超出其父容器的高度，整個頁面將獲得一個滾動條，只有標簽獲得一個滾動條。

這在 Chrome 中沒有體現，到目前為止我只能在 Firefox 中看到它。 下面是我為重現該行為而制作的一些示例代碼。 嵌入選項卡組的組件設置了最大高度。 標簽面板應該占據其中的所有剩余空間（flex：1）

<mat-tab-group class="tabs-panel">
  <mat-tab label="CoolLabel">
    <mat-table [dataSource]="dswithacouplerows">
      <ng-container matColumnDef="mycol">
        <mat-header-cell *matHeaderCellDef>
        </mat-header-cell>
        <mat-cell *matCellDef="let row">bla</mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="mycols; sticky: true"></mat-header-row>
      <mat-row *matRowDef="let row; columns: mycols;" class="get-primary-important"></mat-row>
    </mat-table>
  </mat-tab>
</mat-tab-group>

.tabs-panel {
  flex: 1;
  width: 100%;
}

Answer 1

我在 FF/IE 中的mat-tab-group有一個類似的滾動問題，幸好 GitHub 中的這個評論設法通過為 mat-tab-group 元素設置min-height屬性來修復它：

mat-tab-group {
    min-height: 500px;
}