Angular 15 Material标签控件：能否仅让内容自动滚动？

要实现标签栏始终可见、仅内容区域在溢出时显示滚动条，可通过原生CSS Flexbox配合Angular Material的样式调整来完成，具体步骤如下：

核心布局思路 #

利用Flexbox的空间分配特性，让标签栏（mat-tab-group的标签部分）占据自身所需高度，内容区域自动填充剩余空间，并在内容超出时启用滚动。

1. 设置外层容器样式 #

给包裹mat-tab-group的容器添加Flex布局并指定高度，确保布局有明确的空间参考：

.tab-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 可根据实际需求调整，比如设为父容器的100% */
}

2. 调整mat-tab-group及内容区域样式 #

通过覆盖Angular Material的默认样式，让内容区域自适应剩余空间并支持滚动：

.mat-tab-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mat-tab-body-wrapper {
  flex: 1;
  overflow-y: auto; /* 仅垂直方向溢出时显示滚动条 */
}

3. 组件模板结构 #

在模板中用上述容器包裹标签组，内容直接放在标签面板内即可：

<div class="tab-container">
  <mat-tab-group>
    <mat-tab label="标签1">
      <div class="tab-content">
        <!-- 此处放置大量内容，超出时自动触发滚动 -->
      </div>
    </mat-tab>
    <mat-tab label="标签2">
      <div class="tab-content">
        <!-- 此处放置大量内容，超出时自动触发滚动 -->
      </div>
    </mat-tab>
  </mat-tab-group>
</div>

关键注意事项 #

• 外层容器必须设置明确高度（如100vh、100%），否则Flexbox无法正确分配空间
• 不要给标签内容区域设置固定高度，让其通过Flex布局自动填充剩余空间
• 若需适配不同屏幕尺寸，可结合媒体查询调整容器高度，保证布局在各种设备上正常工作

内容的提问来源于stack exchange，提问作者Alex Cooper