Unable to scroll in child component in Ionic Angular application

I have an Ionic app that has a layout component which includes the toolbar and header. For some reason I am unable to scroll in the child element. Am I wrapping something wrong here? Is the underlying element unreachable perhaps?

I am unsure if this issue has been posted before. It seems weird if I am not allowed to scroll in the child elements, as there is nothing defined in the layout that should block their viewmodel ( I am still able to access inputs in child elements f.ex).

My Layout.html:

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>{{(organization | async)?.name}}</ion-title>
      <ion-menu-toggle right>
        <button ion-button menuToggle right class="menu-button">
          <ion-icon class="menu-icon"src="../../../assets/icons/menu.svg"></ion-icon>
      </button>
    </ion-menu-toggle>
    </ion-toolbar>
  </ion-header>
  <ion-menu contentId="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Meny</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-list>
        <ion-item class="clickable ion-activatable">
          <button color="primary" ion-button size="large" [routerLink]="['/manageusers']"class="clickable ion-activatable">
            <ion-icon slot="start" name="person-add-outline"></ion-icon>
            Legg til bruker
          </button>
        </ion-item>
          <ion-item class="clickable ion-activatable">
            <button color="primary" ion-button size="large" [routerLink]="['/manageorganization']"class="clickable ion-activatable">
              <ion-icon slot="start" name="briefcase-outline"></ion-icon>
              Organisasjon
            </button>
          </ion-item>
        <ion-item class="clickable ion-activatable">
          <button color="primary" ion-button size="large" [routerLink]="['/login']"class="clickable ion-activatable" (click)="this.accountService.logout()">
            <ion-icon slot="start" name="log-out-outline"></ion-icon>
            Logg ut
          </button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

<ion-router-outlet></ion-router-outlet>

<ion-item-group>
  <ion-item *ngIf="this.openQrCode">
  <zxing-scanner
  (scanSuccess) = "scanSuccessHandler($event)"
  (scanError)= "scanErrorHandler($event)"
  ></zxing-scanner>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-fab slot="fixed" vertical="bottom" horizontal="end">
  <ion-fab-button>
    <ion-icon color="success"name="search-outline"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="start">
    <ion-fab-button>
      <ion-icon name="accessibility-outline"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="cube-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>
</ion-item-group>


<ion-item-group>
<ion-tabs>
  <ion-router-outlet></ion-router-outlet>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon src="../../../assets/icons/box-search.svg"></ion-icon>
      Hjem
    </ion-tab-button>
    <ion-tab-button (click)="onOpenQrScanner()"color="secondary-contrast" tab="radio">
      <ion-icon color="tertiary" name="qr-code-outline"></ion-icon>
      Skanner
    </ion-tab-button>
    <ion-tab-button tab="manageequipment" >
      <ion-icon src="../../../assets/icons/add_equipment.svg"></ion-icon>
      Legg til utstyr
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
</ion-item-group>

A child element, Homepage.html:

  <ion-item-group
    *ngIf="{
      equipments: equipments | async,
      locations: locations | async
    } as observables"
>
<ion-list>
    <ion-card class="card" *ngFor="let equipment of (observables.equipments || [])">
      <ion-icon class="card-icon" src="../../../assets/icons/is-available.svg"></ion-icon>
      <ion-card-title class="card card-title">{{equipment.name}}</ion-card-title>
      <ion-card-subtitle class="card" *ngIf="observables.locations">
        Lokasjon: {{getLocationForEquipment(equipment.locationid, observables.locations)?.name || "Ingen satt lokasjon"}}
      </ion-card-subtitle>

      <ion-card-subtitle class="card">
        Status:<span>
          <p *ngIf="equipment.active">Aktiv</p>
          <p *ngIf="!equipment.active">Inaktiv</p>
        </span>

      </ion-card-subtitle>

      <ion-card-subtitle class="card" *ngIf="equipment.model != 'string'">
        Model: {{equipment.model}}
      </ion-card-subtitle>

      <ion-card-subtitle class="card" *ngIf="equipment.serialnumber != 'string'">
        Serienummer: {{equipment.serialnumber}}
      </ion-card-subtitle>

    </ion-card>
  </ion-list>
  </ion-item-group>
  <ion-content>