我想在我的flex布局中安装一个适合特定网格行的手风琴 . 基本上，手风琴的容器元素与行中的另一列的高度相同 . 目前，AM扩展面板忽略了父高度，要么不填充父级，要么推高其高度以适应手风琴的内容 .

AM expansion panel as accordion example

Stackblitz demo

这是一个简化的场景：

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

我的标准很简单：

  • 即使内容不需要空间，手风琴也会填满整个栏目（开放式面板会根据需要拉伸）

  • 如果手风琴面板比父元素可以容纳的高，则内部滚动

  • 动画仍然令人愉快

非常感谢 .

angular-material accordion angular-flex-layout