My app has this page structure:

/home
/menu
    /A
    /B
/admin

so /menu/A and /menu/B are two distinct pages. Anyway, in very large (XL) screens, I could show both of them side by side. So I want a page under /menu, that shows both on XL screens, and just /menu/A on normal screens (the user will manually navigate to /menu/B in case)

so this is my menu.page

<ion-content [scrollEvents]="true"> 

  <ion-grid>
    <ion-row class="ion-align-items-center ion-justify-content-center">
      <!-- left main column -->
      <ion-col size="12" offset-xl="1" size-xl="7" >
        <ion-router-outlet name="main-content" ></ion-router-outlet> 
      </ion-col>

      <!-- right extra column -->
      <ion-col offset-xl="1" size-xl="3" class="only-xl">
        <ion-router-outlet  name="extra-content" ></ion-router-outlet> 
      </ion-col>
    </ion-row>
  </ion-grid>


</ion-content>

and this is my routing

const routes: Routes = [
  {
  path: '',
  redirectTo: 'A',
  pathMatch: 'full'
 },  
  {
    path: 'menu',
    loadChildren: () => import('./choose/choose.module').then( m => m.ChoosePageModule)
  },

  {
    path: 'A',
    component: MenuPage,
    children:[
      {
        path:"",
        outlet: "main-content",
        loadChildren: () => import('./A/A').then( m => m.APageModule)
      },
      {
        path:"",
        outlet: "extra-content",
        loadChildren: () => import('./B/B.module').then( m => m.BPageModule)
      }
    ]
    
  }, 

  {
    path: 'B',
    loadChildren: () => import('./B/B.module').then( m => m.BPageModule)
  },     

The page correctly shows the 2 columns, but page doesn’t scroll. Inspecting code, columns have 0 height. If I write “overflow:0” everything disappears.
I think there is some issue with not using the correct height of its content.

What can I do?