bug(mat-expansion-panel): Expansion panel content flickers during ng-animation for lazy-loaded custom height nested expansion panels

[LukasKlement]

Nested lazy-loaded expansion panels with a custom collapsed height lead to a flickering animation when uncollapsing the parent expansion panel for the first time.

Reproduction

Stackblitz: https://stackblitz.com/edit/nested-lazyloaded-customheight-expansion-panel?file=src/app/example-component.html

Steps to reproduce:

1. Nest two expansion panels with a custom collapsed height inside a lazy-loaded expansion panel
2. Toggle the parent expansion panel

Expected Behavior

The expansion panel opens smoothly.

Actual Behavior

The height of the expansion panel flickers during the animation when opening the parent expansion panel for the first time.

Environment

• Angular: 11.2.11, 12.0.0
• CDK/Material: 11.2.11, 12.0.0
• Browser(s): any

[fplusf]

Is anyone currently working on this, or can I attempt to fix it?