Angular - 如何使 mat-dialog 内的 mat-stepper 内的元素调整到对话框的高度？

Question

I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.

A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?

Here is a stackblitz which shows the problem: Stackblitz

Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.

Answer 1

Your problem is quite simple, the content of the dialog does not fit the height of your dialog.

Every child of the dialog mat-dialog-content , mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).

Here is a quick example of this .