CdkVirtualFor ничего не отображает

У меня есть диалог со следующим кодом, который показывает несколько mat-card. Код отлично работает с ngfor и показывает то, что я ожидаю. Но т.к. количество карточек было большим, я решил использовать cdkScrolling , но при добавлении кода он ничего не показывал, хоть и отрисовывался в коде. И страница отображается почти пустой. Кто-нибудь знает, в чем проблема? Я неправильно реализовал?

диалог.html:

    <div style = "direction: rtl;position: relative" fxLayout = "row wrap" fxLayoutAlign = "space-around right">
  <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "ball-clip-rotate"
               [fullScreen] = "false"></ngx-spinner>
  <div fxFlex = "100">
    <mat-card style = "text-align: center; font-size: 13px">
      <mat-card-header style = "flex-direction: row; box-sizing: border-box; display: flex;">
        <img mat-card-avatar #avatarPic [src] = "data.selectedPage.profilePicUrl"
             (error) = "avatarPic.src = 'assets/images/default_image-4_3-640x360.png'"
              >
        <mat-card-title>
          {{data.selectedPage.userName}}
        </mat-card-title>
        <mat-card-subtitle>
          {{data.selectedPage.bio}}
        </mat-card-subtitle>
        <span style = "width: 100%"></span>
        <button mat-button (click) = "close()">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
      </mat-card-header>
      <mat-divider style = "border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>
      <div fxLayout = "row wrap" fxLayoutAlign = "center center" style = "font-size: 16px;margin: 10px">
        <div fxFlex = "50"> تعداد دنبال کننده: {{data.selectedPage.followerCount}} </div>
        <div fxFlex = "50" style = "border-right: 1px solid rgb(103, 102, 102);">  تعداد دنبال شونده: {{data.selectedPage.followingCount}} </div>
      </div>
      <mat-divider style = "border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>
    </mat-card>
  </div>
  <cdk-virtual-scroll-viewport itemSize = "500">
  <div *cdkVirtualFor = "let media of medias" fxFlex = "33.33">
    <mat-card>
      <mat-card-content style = "height: 500px">
        <img #postImage (error) = "postImage.src = 'assets/images/default_image-4_3-640x360.png'"
             [src] = "media.imageUrl" style = "width: 100%;height: 256px">
        <p style = "height: 200px;overflow-x: hidden">{{media.caption}}</p>
      </mat-card-content>
      <button mat-button style = "width: 100%;margin-bottom: 5px">دریافت کامنت ها</button>
      <mat-divider></mat-divider>
      <mat-card-actions style = "padding: 10px;position: relative;display: flex">
        <div class = "show-profile-likes">
          <mat-icon style = "vertical-align: bottom;font-size: 15px">thumb_up_alt</mat-icon>
          {{media.likesCount}}
        </div>
        <div class = "show-profile-comments">
        <mat-icon style = "vertical-align: bottom;font-size: 15px">insert_comment</mat-icon>
        {{media.commentsCount}}
      </div>
        <div class = "show-profile-date">
          <mat-icon style = "vertical-align: bottom;font-size: 15px">insert_invitation</mat-icon>
          {{ media.takenAt | persianDate}}
        </div>
      </mat-card-actions>
    </mat-card>
  </div>
</cdk-virtual-scroll-viewport>
</div>