如何使 Angular Material 手风琴适合容器？

Question

我想要一个适合我的 flex 布局中特定网格行的手风琴。基本上，手风琴的容器元素将与行中的另一列具有相同的高度。目前，AM 扩展面板不考虑父级高度，要么不填充父级，要么推动其高度以适应手风琴的内容。

AM 扩展面板作为手风琴示例

Stackblitz 演示

这是一个简化的场景：

<div fxLayout="row">
    <div fxFlex> <!-- THIS COLUMN WOULD DETERMINE ROW HEIGHT -->
        ...
    </div>

    <div fxFlex="30%"> <!-- THIS COLUMN WOULD CONSTRAIN THE ACCORDION -->
        <mat-accordion displayMode="flat">
            <mat-expansion-panel [expanded]="true">
                <mat-expansion-panel-header>
                    <mat-panel-title>Title One</mat-panel-title>
                </mat-expansion-panel-header>

                <p>Blah.</p>

                <p>Blah.</p>

                <p>Blah.</p>
            </mat-expansion-panel>

            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>Title Two</mat-panel-title>
                </mat-expansion-panel-header>

                <p>I'm visible because I am open</p>
            </mat-expansion-panel>
        </mat-accordion>
    </div>
</div>

我的标准很简单：

• 即使内容不需要空间，手风琴也会填满整个列（打开的面板会根据需要拉伸）
• 如果手风琴面板比父元素可以容纳的高度高，则手风琴面板具有内部滚动
• 动画仍然令人愉快

非常感谢。