Установка фиксированного положения списка сетки сетки делает его исчезающим [Угловой]

Question

У меня есть следующий HTML Код:

<div class="container">

  <mat-grid-list cols="1" rowHeight="20px">
    <mat-grid-tile>
      <app-my-component></app-my-component>
    </mat-grid-tile>
  </mat-grid-list>

  <mat-grid-list cols="12" rowHeight="100px" (window:resize)="onResize($event)">

    <mat-grid-tile [colspan]="sideCols>
      <button mat-icon-button><i class="material-icons">skip_previous</i></button>
      <button mat-icon-button><i class="material-icons">{{playStateIcon}}</i></button>
      <button mat-icon-button><i class="material-icons">skip_next</i></button>
    </mat-grid-tile>

    <mat-grid-tile [colspan]="12 - (2 * sideCols)">
      <mat-list>
        <app-song-list-item-player></app-song-list-item-player>
      </mat-list>
    </mat-grid-tile>

    <mat-grid-tile [colspan]="sideCols" style="background-color: orange;">
      <button (click)="toggleAudio()" mat-icon-button><i class="material-icons">{{volumeStateIcon}}</i></button>
      <button mat-icon-button><i class="material-icons">repeat</i></button>
      <button mat-icon-button><i class="material-icons">arrow_drop_up</i></button>
    </mat-grid-tile>

  </mat-grid-list>

</div>

Я пытался установить фиксированное положение класса container, но когда я это делаю, мой объект исчезает? Я попытался установить блокировку дисплея, но это не помогло.