mat-dialog-content的孩子可以有高度：100%吗？

Question

这是问题的演示：https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts

当

mat-dialog-content

里面的内容太高时，我希望能够控制滚动条出现的位置。在这张图片中，它滚动整个

mat-dialog-content

元素，但是 我希望它只滚动到 mat-tab 内容内部，而不是选项卡组之外。

mat-dialog-content

 有 

max-width: 65vh

，那很好。在本例中，即 629.85px

然而，这个

mat-tab-group

，尽管有

width: 100%

，也会溢出

mat-dialog-content

（1553px），就像相对高度并不重要一样。

我了解到，相对高度仅在父级作为设定高度时才有效（

here），但这就是问题所在吗？在这种情况下我该如何规避它？因为该答案中建议的解决方案（html { height: 100% }

）不适用于此处。

Answer 1

您必须利用容器

overflow: hidden

 上的 

mat-mdc-dialog-content

，这样就不会出现滚动条。

之后我们将相同的容器设置为

flex

，以便子元素采用父元素的高度。

最后我们使用

overflow-y: auto

，这样我们就可以在选项卡下方的容器上看到滚动条。

@import '@angular/material/prebuilt-themes/azure-blue.css';

.mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mat-mdc-dialog-content > :first-child {
  display: flex;
  overflow: hidden;
}
.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {
  overflow-y: auto;
}

Stackblitz 演示