Angular Material mat-tabs 都有不同的高度

问题描述

我希望所有标签都具有相同的高度，无论里面有什么内容。

标签位于 div 内。最好我不需要为此 div 设置固定高度，而是 div 应该具有包含最多东西的 mat-tab 的高度。

还没有发现任何真正有效的东西，如果有人能帮忙那就太好了！

我当前的代码：

HTML：

<div fxLayout="column" style="min-height: 100%; height: 100%">
  <mat-tab-group style="height: 100%">
    <mat-tab label="1">
      <mat-card fxFill class="mat-elevation-z4 about-card">
        this mat-card contains the most amount of stuff
      </mat-card>
    </mat-tab>
    <mat-tab label="2">
      <mat-card fxFill class="mat-elevation-z4 about-card">
      ...a bunch of things
      </mat-card>
    </mat-tab>
    <mat-tab label="3">
      <mat-card fxFill class="mat-elevation-z4 about-card">
      ...a bunch of things
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</div>

CSS：

.about-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
}

编辑：一些样板示例：

第一个标签：

第二个标签：

看看内容的高度有什么不同

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular-material mat-tab