Unable to scroll using split-pane

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

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

The view that is being rendered

<template>
  <ion-page>
    <ion-content>
      <div class="container">
        <div v-for="item in items" :key="item.name">
          <apexchart
            height="300"
            width="300"
            :options="item.chartOptions"
            :series="item.series"
          ></apexchart>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

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