Ion-virtual-scroll does not grow when using a mat-expansion-panel

Ionic Framework
1

So I want to combine virtual scroll of Ionic with a mat-expansion-panel of Angular . But because the item is a fixed size, it does not expand anymore. Also, when scrolling the items layout gets messed up by not every item having same distance from each other. How can I fix this?

HTML:

<mat-accordion>
    <ion-virtual-scroll [items]="listItems">
        <div *virtualItem='let item'>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Test
                    </mat-panel-title>
                    <mat-panel-description>
                        Description
                    </mat-panel-description>
                </mat-expansion-panel-header>
                Test 123
            </mat-expansion-panel>
        </div>
    </ion-virtual-scroll>
</mat-accordion>

TS:

export class AppComponent {
  listItems = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

Stackblitz example:

1 Like
2

It does not expand using ion-accordion either, any solution for this ?