mat-dialog-content子元素能否设置height:100%？以及如何实现mat-tab内容内部独立滚动

嗨，我来帮你搞定这个问题！首先明确说：mat-dialog-content的子元素完全可以设置height:100%，但得配合正确的布局约束才能生效，这样就能实现你想要的「tab内容内部独立滚动」的效果啦。

先分析下你当前的问题：现在整个mat-dialog-content出现滚动条，是因为里面的tab-group和内容总高度超过了dialog-content的max-height（65vh），导致整个容器被撑开滚动。我们要做的是让tab-group占满dialog-content的可用高度，然后把滚动限制在每个tab的内容区域里。

下面是具体的实现步骤，亲测有效：

第一步：给mat-dialog-content设置flex布局 #

默认的mat-dialog-content是block布局，子元素没法直接继承高度。我们把它改成flex垂直布局，这样里面的元素可以自动分配空间：

mat-dialog-content {
  max-height: 65vh; /* 保留你原来的设置 */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 可选，给元素之间加些间距，看起来更舒服 */
}

第二步：让mat-tab-group占满可用高度 #

给mat-tab-group加上flex: 1，这样它会自动填充dialog-content里除了标题、按钮栏等其他元素之外的所有空间：

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

/* 让tab的内容容器占满tab-group的高度 */
mat-tab-group .mat-tab-body-wrapper {
  flex: 1;
}

第三步：给每个tab的内容添加滚动容器 #

在每个mat-tab内部，套一个容器，设置高度100%并允许垂直滚动：

.tab-content {
  height: 100%;
  overflow-y: auto;
  padding: 0.5rem; /* 可选，加内边距避免内容贴边 */
}

对应的HTML结构大概是这样：

<mat-dialog-content>
  <!-- 比如你的对话框标题 -->
  <h3>这是我的对话框</h3>

  <mat-tab-group>
    <mat-tab label="标签一">
      <div class="tab-content">
        <!-- 这里放你的长内容，超过高度就会在tab内部滚动 -->
        比如很多很多文本...
      </div>
    </mat-tab>
    <mat-tab label="标签二">
      <div class="tab-content">
        <!-- 另一个标签的长内容 -->
        更多更多内容...
      </div>
    </mat-tab>
  </mat-tab-group>
</mat-dialog-content>

为什么这样能生效？ #

通过flex布局，我们让mat-tab-group有了明确的可用高度参考（dialog-content的剩余空间），然后让tab的内容容器占满这个高度，再通过overflow-y: auto把滚动限制在容器内部。这样即使tab里的内容很长，也只会在tab自己的区域里滚动，不会影响整个dialog-content啦。

要是你之前直接给子元素设height:100%没生效，大概率是因为父元素没有明确的高度或者不是flex容器，子元素的100%找不到参考值，自然就不生效啦。用flex布局就完美解决了这个问题，还能适配不同屏幕尺寸~

备注：内容来源于stack exchange，提问作者Tovar