mat-extension-panel, контент не восстанавливает свою первоначальную высоту после закрытия панели

Question

Редактировать: я решаю эту проблему, потому что мне не хватало div class="row", и имеет смысл без строки, когда панель была закрыта, div class="col" плавал там, потому что ее не было внутри чего-либо.Внутри ряд отлично работает:)

В приложении Angular у меня есть список событий, каждое из которых представляет собой панель расширения матов из Angular Material.

После списка событий естьнекоторого HTML-содержимого, проблема возникает, когда после открытия и закрытия панели исходная высота документа (с закрытой панелью) не восстанавливает исходную высоту.

То же самое происходит, когда имеется более одного события,высота стека каждого события, если вы открыли их все, а затем закрыли, что сделало документ очень большим.

Панель с одним событием

<div class="col s12 m12 l6 events-list animated fadeIn">
<mat-accordion class="event">
    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
        <mat-expansion-panel-header>
            <mat-panel-title [ngClass]="{'title': panelOpenState == true}">
                {{event.eventName}}
            </mat-panel-title>
            <mat-panel-description>
                {{event.eventTime}}
            </mat-panel-description>
        </mat-expansion-panel-header>
        {{event.eventDescription}}
        <br>
        <br>
        <button class="btn orange" (click)="createPoll(event.entityID)">Crear Tema</button>
    </mat-expansion-panel>
 </mat-accordion>
</div>

Страница событий

<div class="row">
 <app-event *ngFor="let event of eventList" [event]="event"></app-event>
</div>

Есть ли способ решить эту проблему?рад видеть некоторые ответы:)

Пример:

Страница с закрытой панелью

Страница с открытой панелью

Страница, когда панель открытазакрыто (выпуск здесь, КРАСНАЯ КВАДРАТ)