When i resize the window using the <ion-split-pane>, the content disapears (menu and router outlet)

I have two ion menus and one main content(router outlet). And when i resize the page or place it on moblie view, i get a blank page, like the content is missing.

code:

<ion-app>
  <ion-split-pane>

    <ion-menu side="start" menuId="first" contentId="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-menu side="end" menuId="first" contentId="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

  <ion-router-outlet></ion-router-outlet>

  </ion-split-pane>
</ion-app>

What can i add or do to make the content not disapear?