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>