Угловой мат-сиденав для настольного и мобильного - разной ширины

Question

У меня есть Angular 7 приложение, и я пытаюсь применить стиль к моему mat-sidenav в зависимости от того, настольный или мобильный, но я не могу выяснить это вообще.

Я также использую flex,

Ниже мой HTML:

<mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav position="end">
        <mat-nav-list>
            <a mat-list-item routerLink="/aboutus" routerLinkActive="active" (click)="sidenav.toggle()">
                About us
            </a>
            <a mat-list-item routerLink="/ourblogs" routerLinkActive="active" (click)="sidenav.toggle()">
                Our blogs
            </a>
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content fxFlexFill>...</mat-sidenav-content fxFlexFill>
</mat-sidenav-container fxFlexFill>

Я пробовал следующее:

<mat-sidenav #sidenav position="end" fxFlex="30%" fxFlex.gt-md="30%">
<mat-nav-list fxFlex="30%" fxFlex.gt-md="30%">

Но это не делает истинные 30%.

Используя F12, если я проверяю элемент и меняю max-width: 30% быть просто width: 30% это работает и выглядит правильно.

То, что я пытаюсь сделать, это установить mat-sidenav должен быть 30%, а основной раздел контента - 70%, когда он отображается только в режиме рабочего стола, но с трудом справляется с этим.