FF 中的 Angular mat-tab 和 mat-table 滚动问题答案

【问题标题】：Angular mat-tab and mat-table scrolling problem in FFFF 中的 Angular mat-tab 和 mat-table 滚动问题
【发布时间】：2019-03-14 16:44:41
【问题描述】：

我在 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%;
}

【问题讨论】：

标签： html css angular

【解决方案1】：

我在 FF/IE 中遇到了与 mat-tab-group 类似的滚动问题，感谢 GitHub 中的 this comment 设法通过设置 解决了这个问题mat-tab-group 元素的 min-height 属性：

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

【讨论】：