La taille automatique du matériau angulaire SideNav ne fonctionne pas

J'utilisais Angular Material pour créer un sidenav qui peut masquer le texte de navigation lorsque vous cliquez sur le menu. Je suis https://material.angular.io/components/sidenav/overview en utilisant la taille automatique sur mat-sidenav-container

Mais le sidenav superpose toujours la partie mat-sidenav-content et ne redimensionne pas automatiquement la partie contenu

J'utilise "@ angular / material": "^ 8.0.2"

html

.example-container {
  width: 100%;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  padding: 10px;
  height: 100%;
}

fichier ts

import {Component} from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
  isExpanded = false;
}

css

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true">

    <mat-nav-list>
      <mat-list-item>
        <button mat-icon-button (click)="isExpanded = !isExpanded">
          <mat-icon *ngIf="!isExpanded">chevron_right</mat-icon>
          <mat-icon *ngIf="isExpanded">chevron_left</mat-icon>
        </button>
      </mat-list-item>
      <mat-list-item>
       <mat-icon mat-list-icon>home</mat-icon>
         <p matLine *ngIf="isExpanded">Home</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    Main content 

</mat-sidenav-content>

</mat-sidenav-container>