Unable to scroll using split-pane

When the split pane reaches below the md breakpoint my main router-outlet cannot be scrolled
any ideas?

  <!--- MOBILE HEADER--->
  <ion-split-pane when="md" content-id="main">
    <ion-header class="ion-hide-md-up">
        <ion-title>{{ currentRoute() }}</ion-title>
        <ion-buttons slot="start">
    <ion-menu side="start" menu-id="first" class="ion-menu" content-id="main">
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
            v-for="route in routes"
            :class="{ active: currentRoute() === route.name }"
            <ion-icon :icon="route.meta.icon" slot="start" />
            <ion-label>{{ route.meta.displayName }}</ion-label>
    <ion-router-outlet id="main" />

The view that is being rendered

      <div class="container">
        <div v-for="item in items" :key="item.name">

Do you have a link to this project or some code we could run locally? Maybe it’s the apexchart component? But it’s hard to tell without actually having code to run and debug.

So , I finally found it the <ion-header> element contained in the split pane overlays over the whole view under the md break point , to conclude the <ion-header> has no place inside the split pane and it works when removing it.

Diving into this more…the whole layout for your app seems really off. Why do you have a split view not at the root of the app layout? Why is there a random menu component? The structure of this seems really off

Am experimenting because its my first contact with ionic/vue3 thus any suggestions or example repositories would be much appreciated , thank you for the interest.Although right now everything is working as expected , you saying its off its kinda worrying.

I’d take a look at the sidemenu starter for vue to get a gist of what our recommended structure is for layouts like this.

So if this is considered a correct utilization of the split-pane component , how my implementation differs besides the fact that the split pane is not in the root of my App , I don’t intend for it to be inherited by every route but its utilized the same way in vue-ionic-playground/basic.vue at 2e2fd1bb52c13272998842ecab08c65f60a4cb26 · mVIII/vue-ionic-playground · GitHub