Can't scroll my virtual scroll items

I got an issue with the cdk-virtual-scroll. I can’t seem to scroll my items when using my custom component app-games. It works when I use a standard div element with some placeholder text.

Here’s the code:

<ion-content>
      <ion-spinner *ngIf="fetchingDataCounter" name="dots" class="spinner-margin-top"></ion-spinner>
      <swiper-container *ngIf="!fetchingDataCounter" #teamDetailsSlides [modules]="swiperModules" [initialSlide]="0"
         [slidesPerView]="1" [speed]="150" (slidechangetransitionstart)="swapTabViaSwipe()">
         <swiper-slide>
          ...
         </swiper-slide>
         <swiper-slide class="slide-no-padding-y">
            <cdk-virtual-scroll-viewport *ngIf="games.length" itemSize="106" minBufferPx="900" maxBufferPx="1350">
               <app-games *cdkVirtualFor="let game of games;" [gameSummaries]="[game]"
                  [teamCalendarTeamId]="team.id"></app-games>
            </cdk-virtual-scroll-viewport>

            <div *ngIf="!games.length" class="no-data">
               <ion-img class="no-data__icon" src="assets/images/calendar.svg"></ion-img>
               <ion-label class="no-data__description">De kalender is nog niet beschikbaar...</ion-label>
            </div>
         </swiper-slide>
         <swiper-slide>
           ...
         </swiper-slide>
      </swiper-container>
   </ion-content>

Any ideas? I migrated from the old ion-virtual-scroll, that worked.
Thanks in advance!