Ionic angular router overflow

In my app I have 3 nested ion-router-outlet's which work fine, until the third ion-router-outlet has overflowing content. Can I somehow set the inner outlet to height: auto, or something similar, so that my content becomes scrollable.

This is what the app looks like when no overflow occurs and this is how it looks with overflow inside the inner outlet.

This is my code for the wrapper of the third outlet:

html
<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">
  <ion-grid fixed class="padding">
    <h1 class="title">
      {{ title }}
    </h1>

    <app-tab-navigation baseUrl="/admin/authentication/" [tabOptions]="tabOptions"></app-tab-navigation>

    <ion-router-outlet></ion-router-outlet>
  </ion-grid>
</ion-content>

scss
ion-router-outlet {
  overflow: visible;
  margin-top: 48px;
  padding-top: 0px;
}

The interesting thing is, when I use angular's router-outlet the overflow works fine but then I need to use the ion-router-outlet.

Im using ionic 6 with angular 13.

Is there any way to fix this with css or any ionic configuration?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum