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

Question

我有一个 mat-dialog，其中包含一个 mat-stepper。 在这个步进器中，我有一个包含表单的步骤。 在这种形式中，我有多个元素（列表、垫卡和表格），我希望它们始终填充对话框的高度。 基本上，我希望表格的高度以及表格左侧的列表高度调整为对话框高度。 选择列表中的项目时显示的垫卡应始终位于对话框的左下角，其上方的列表应显示所有元素（如果可能）或在元素不足时显示滚动条留出空间来显示所有元素。 如果空间足够，该表还应显示所有元素，如果空间不足，则应显示滚动条。 我不希望此对话框中的任何元素导致溢出，这需要我在实际对话框中滚动。

一位同事试图通过使用max-height: calc(90vh - <x>px)来解决这个问题，但这实际上根本不能很好地工作。 我怎样才能正确地做到这一点？

这是一个显示问题的stackblitz： Stackblitz

希望我的问题很清楚。 如果没有，请告诉我，我会尽力更详细地解释它。

Answer 1

你的问题很简单，对话框的内容不适合你对话框的高度。

对话框mat-dialog-content 、 mat-stepper等的每个子项都应该最大化它们的高度（在 flex 容器中使用height:100%或flex:1 ）。

这是一个简单的例子。