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 ）。

這是一個簡單的例子。