选项卡中包含的卡片内容上的角度材质滚动条答案

【问题标题】：Angular Material Scrollbar on Card Content Enclosed in a Tab选项卡中包含的卡片内容上的角度材质滚动条
【发布时间】：2020-09-25 22:59:15
【问题描述】：

请帮助解决我在设置角形材质标签时遇到的问题。

见：https://stackblitz.com/edit/angular-6-material-tab-problem?file=app/tab.component.html [编辑：在进行我在回答中提到的更改后，stackblitz 示例正在按预期工作]

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

当 mat-card-content 中的内容时，Overflow-y 滚动条可用超出选项卡中的可见空间。
mat-card 或 mat-tab 上没有滚动条应该能够适当调整大小。
例如，在调整窗口大小时，mat-tab-group 的高度可能长得更高 -- mat-card-content 也应该长得更高如果需要，可滚动。

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

例如，虽然样式相同，但第二个选项卡不正确。 mat-card 的红色矩形应填充 mat-tab 的高度。最右侧还有一个不需要的滚动条。

这是模板：

<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;
}

【问题讨论】：

标签： html css angular-material scrollbar

【解决方案1】：

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

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

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

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

【讨论】：