title: unable to set the height of a angular/material sidenav to 100%
body: <p>I am trying to set the height of a angular/material sidenav to 100%.  For some reason it's set to 22px making it impossible to use as any item in the sidenav fills up the entire height...  I managed to get this to work using the mat-sidenav-container fullscreen property however when I do that all other content (which should be next to the sidenav) doesn't get displayed...  Reading through the sidenav documentation I found the following:</p>
  
  <blockquote>
    <p>"For a fullscreen sidenav, the recommended approach is set up the DOM
    such that the  can naturally take up the full
    space:"</p>
  </blockquote>
  
  <p>Then they have an example which I'm trying to copy.  When I look at my sn-content div inside the mat-sidenav-container's css styles in chrome I see that height is greyed out for some reason?  i've copied the selector path from chrome dev tools inspect element and set the height to 100% but still no luck.  I also tried using !important but that also didn't change anything.  Any idea what i'm doing wrong/what might be going on here?</p>
  
  <p>My navigation component's html code:</p>
  
  <pre><code>&lt;mat-sidenav-container position="start"&gt;
      &lt;mat-sidenav #sidenav mode="push"&gt;
          Navigation component width is ok
          &lt;ul&gt;
              &lt;li&gt;item&lt;/li&gt;
              &lt;li&gt;item&lt;/li&gt;
              &lt;li&gt;item&lt;/li&gt;
              &lt;li&gt;item&lt;/li&gt;
              &lt;li&gt;item&lt;/li&gt;
              &lt;li&gt;item&lt;/li&gt;
              &lt;li&gt;item&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/mat-sidenav&gt;
      &lt;div class="sn-content"&gt;
      &lt;button type="button" (click)="sidenav.toggle()"&gt;toggle&lt;/button&gt;
      &lt;/div&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>my navigation component's css:</p>
  
  <pre><code>body &gt; app-root &gt; app-home &gt; navigation &gt; mat-sidenav-container &gt; mat-sidenav-content {
      margin: 0;
      height: 100% !important;
      width: 100%;
  }
  </code></pre>
  
  <p>I then use this navigation component in the following html code:</p>
  
  <pre><code>&lt;navigation&gt;&lt;/navigation&gt;
  
          &lt;div fxLayout="column" fxLayoutAlign="end end"&gt;
              &lt;div fxFlex="20%"&gt;
              &lt;h4&gt;testing angular flex layout turning out to be quite unusual&lt;/h4&gt;                
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>