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

Question

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

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

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

Answer 1

Я наконец нашел, где была проблема. В scss-файле высота панели расширения была установлена ​​на 50 пикселей, поэтому он не может больше расширяться. Когда я удалил это все в порядке.