ion-router-outlet hides under ion menu in ionic angular - html

Question

Following code works fine in mobile view but source code does not work in web view. screenshot is attaced with question. split pane is not working as per required. same is happening with every component. I have tried many things like host: style{width:70%} but nothing works. Basically it should acquire remaining space of page.
<ion-split-pane class="ion-menu" contentId="mis-menu-content" when="xl">
<ion-menu type="overlay" contentId="mis-menu-content" class="menu-gradient">
<ion-content>
<div *ngFor="let p of appPages">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngIf="p.url">
<ion-item
[routerDirection]="'root'"
[routerLink]="[p.url]"
routerLinkActive="active"
>
<ion-img slot="start" class="imgset" [src]="p.icon"></ion-img>
<ion-label class="menu-font"> {{p.title}} </ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item
button
*ngIf="p.children?.length>0"
(click)="p.open = !p.open"
[class.active-parent]="p.open"
detail="false"
>
<ion-img slot="start" class="imgset" [src]="p.icon"></ion-img>
<ion-icon
class="imgset"
slot="end"
name="chevron-forward-outline"
*ngIf="!p.open"
></ion-icon>
<ion-icon
class="imgset"
slot="end"
name="chevron-down-outline"
*ngIf="p.open"
></ion-icon>
<ion-label class="menu-font">{{p.title}}</ion-label>
</ion-item>
<ion-list class="item-md-list" *ngIf="p.open">
<ion-menu-toggle auto-hide="false" *ngFor="let sub of p.children">
<ion-item
[routerDirection]="'root'"
[routerLink]="[sub.url]"
routerLinkActive="active"
>
<ion-img
slot="start"
class="imgset-sub"
[src]="sub.icon"
></ion-img>
<ion-label class="menu-font-sub"> {{sub.title}} </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="mis-menu-content" main>
<link href="roboto.css" type="text/html" />
<ion-row>
<ion-col size-lg="12" size-md="12" size-sm="12" size="12">
<ion-title class="welcomelogo"
><img src="../../../assets/img/pil logo.png"
/></ion-title>
<ion-title class="welcometxt">
Welcome <br /><ion-title class="welcometxt1">To</ion-title
><br /><ion-title class="welcometxt2">Operations Portal</ion-title>
</ion-title>
</ion-col>
</ion-row>
</ion-router-outlet>
</ion-split-pane>
}
.split-pane {
position: absolute;
/* top: $SPLIT_TOP; */
}
ion-menu[type="overlay"] {
z-index: 80;
position: fixed;
}
ion-menu[type="reveal"] {
z-index: 80;
}
.menu-item{
background:none;
color:white;
font-weight:300;
border:0px;
.item-content{
background:none;
&.activated{
/* background: $MENU_TRANSPARENCY; */
}
}
&.active-page-highlight{
.item-content{
/* background: $MENU_TRANSPARENCY; */
}
}
}