ionic 4 virtual scroll not setting height inside container

So, I have created a layout for a page which contains a Header and a button, and below an ng-container in which the ion-virtual-scroll is being rendered. However, the last elements are not being displayed because I can’t scroll to their location, but if I delete all the remaining elements on the layout then every element on the ion-virtual-scroll are visible.

this is the layout template:

        <app-header [name]="name" [avatar]="avatar"></app-header>
<ion-searchbar (ionChange)="emitValue($event.detail.value)"></ion-searchbar>

and this is the scroll template:

<app-page-layout (searchValue)="filter($event)">
  <ion-content >
    <ion-virtual-scroll [items]="notifications" approxItemHeight="154px">
      <div *virtualItem="let notification">
        <app-notification-card [data]="notification"></app-notification-card>