Панель расширения углового материала в виртуальной прокрутке

У меня есть функция виртуальной прокрутки на моем сайте. Каждый элемент виртуальной прокрутки представляет собой панель расширения с разным количеством строк внутри. Когда я реализую <cdk-virtual-scroll-viewport>, панели расширения отображаются нормально, но когда я нажимаю на текущую панель, она не расширяется, а только увеличивает его высоту, возможно, на 5 пикселей. Я не знаю, как это сделать, эта панель расширения будет нормально расширяться.

Я пытался переместить панель расширения в <ng-container>, но id не помог.

<div class = "container">
  <mat-card>
        <mat-card-title>
          <span class = "panelItem">Id</span>
          <span class = "secondPanelItem">Name</span>
          <span class = "lastPanelItem">Version</span>
        </mat-card-title>
  </mat-card>
  <cdk-virtual-scroll-viewport itemSize = "50" class = "viewport">
    <mat-accordion>
      <ng-container *cdkVirtualFor = "let description of allDescriptions">
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <span class = "panelItem">{{description.id}}</span>
              <span class = "secondPanelItem">{{description.name}}</span>
              <span class = "lastPanelItem">{{description.version}}</span>
            </mat-panel-title> 
          </mat-expansion-panel-header>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>
  </cdk-virtual-scroll-viewport>
</div>