title: Angular Material SideNav autosize not working
body: <p>I was using Angular Material to build a sidenav that can hide the nav text when onclick menu.
  I follow the <a href="https://material.angular.io/components/sidenav/overview" rel="noreferrer">https://material.angular.io/components/sidenav/overview</a>  using autosize on mat-sidenav-container</p>
  
  <p>But the sidenav still overlay the mat-sidenav-content part and it doesn't auto resize the content part</p>
  
  <p>I using "@angular/material": "^8.0.2"</p>
  
  <p><a href="https://i.stack.imgur.com/jj0DR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jj0DR.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/JQEr6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JQEr6.png" alt="n"></a></p>
  
  <p>html</p>
  
  <pre><code>&lt;mat-sidenav-container class="example-container" autosize&gt;
    &lt;mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true"&gt;
  
      &lt;mat-nav-list&gt;
        &lt;mat-list-item&gt;
          &lt;button mat-icon-button (click)="isExpanded = !isExpanded"&gt;
            &lt;mat-icon *ngIf="!isExpanded"&gt;chevron_right&lt;/mat-icon&gt;
            &lt;mat-icon *ngIf="isExpanded"&gt;chevron_left&lt;/mat-icon&gt;
          &lt;/button&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
         &lt;mat-icon mat-list-icon&gt;home&lt;/mat-icon&gt;
           &lt;p matLine *ngIf="isExpanded"&gt;Home&lt;/p&gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
  
      Main content 
  
  &lt;/mat-sidenav-content&gt;
  
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>ts file</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.example-container {
    width: 100%;
    height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }
  
  .example-sidenav-content {
    padding: 10px;
    height: 100%;
  }
  
  </code></pre>