制表符中包含的卡片内容上的角材料滚动条

Question

请帮助我解决角形材质标签的样式问题。

请参阅：https://stackblitz.com/edit/angular-6-material-tab-problem?file=app/tab.component.html[编辑：做出我在答案中指出的更改后，stackblitz示例按预期方式工作]

第一个标签与我想要的接近：

1. 溢出y滚动条在mat-card-content中的内容时可用超出了标签中的可见空间。
2. mat-card或mat-tab上没有滚动条，应该能够适当调整大小。
3. 例如，在调整窗口大小时，mat-tab-group的高度可以变得更高-席卡的内容也应该更高并且要高可滚动，如果需要。

但是，当mat-card-content中内容的长度不超过标签的高度时，会出现问题。

例如，使用相同的样式，第二个选项卡不正确。席卡的红色矩形应填充席标签的高度。最右端还有一个不需要的滚动条。

这里是模板：

<mat-tab-group>
  <mat-tab label="Properties">
    <mat-card class="scrollable-content">
      <mat-card-header>
          <mat-card-title>Card Data</mat-card-title>
      </mat-card-header>
      <mat-card-content>
          My Content for this card...<br>
          0 Lots and lots of content.<br>
          1 Lots and lots of content.<br>
          2 Lots and lots of content.<br>
          3 Lots and lots of content.<br>
          4 Lots and lots of content.<br>
          5 Lots and lots of content.<br>
          6 Lots and lots of content.<br>
          7 Lots and lots of content.<br>
          8 Lots and lots of content.<br>
          9 Lots and lots of content.<br>
          10 Lots and lots of content.<br>
          11 Lots and lots of content.<br>
          12 Lots and lots of content.<br>
          13 Lots and lots of content.<br>
          14 Lots and lots of content.<br>
          15 Lots and lots of content.<br>
          16 Lots and lots of content.<br>
          17 Lots and lots of content.<br>
          18 Lots and lots of content.<br>
          19 Lots and lots of content.<br>
          20 Lots and lots of content.<br>
          21 Lots and lots of content.<br>
          22 Lots and lots of content.<br>
          23 Lots and lots of content.<br>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="2nd Tab">
    <mat-card  class="scrollable-content">
      <mat-card-header>
          <mat-card-title>Other Stuff</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        2nd Tab
      </mat-card-content>
    </mat-card>
  </mat-tab>
</mat-tab-group>

这是CSS：

.mat-card.scrollable-content{
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mat-card.scrollable-content mat-card-content {
    overflow-y: auto;
}
.mat-card.scrollable-content mat-card-title {
    display: block;
}

.mat-tab-group {
  height: 400px;
  border: 2px solid #00F;
}

.mat-card-content {
  border: 2px solid #0F0
}
.mat-card-title {
  font-weight: bold;
  font-size: 1.25em !important;
}
.mat-card {
  border: 2px solid #F00;
  height: 85%;
}

.mat-tab-label{
  font-weight: bold;
  font-size: 1.25em;
}

Answer 1

我意识到模板中使用的材料设计元素已被预处理为其他CSS类之后，才能够解决问题。

我通过将以下内容添加到CSS中来使其工作：

.mat-tab-body-content {
  overflow: hidden !important;
}

.mat-tab-body-wrapper {
  height: 100% !important;
}