Here’s a demo of the problem: https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts
When the contents inside mat-dialog-content are too tall, I want to be able to control where the scrollbar will appear. In this picture, it scrolls the whole mat-dialog-content element, but I want it to scroll only inside the mat-tab contents, not outside the tab group.
mat-dialog-content has max-width: 65vh, and that’s fine. In this example, that’s 629.85px
However, this mat-tab-group, despite having width: 100%, will overflow mat-dialog-content (1553px) like the relative height doesn’t matter.
I have learned that relative height only works if the parent as a set height (here), but is that the problem here? And how can I circumvent it in this situation? Because the solution suggested in that answer (html { height: 100% }) doesn’t apply here.
0
You have to leverage overflow: hidden on the container mat-mdc-dialog-content so that there is no scroll bar.
After that we set the same container to flex so that the children take the height of the parent element.
Finally we use overflow-y: auto, so that we get the scrollbar on the container below the tabs.
@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 Demo