title: angular material mat-drawer issue with height
body: <p>For some reason, I can't seem to get the mat drawer to occupy the remaining available height on the screen. I've tried:</p>
  
  <pre><code>.drawer-container {
      position: fixed;
      height: 100%;
      min-height: 100%;
      width: 100%;
      min-width: 100%;
  }
  </code></pre>
  
  <p>But I still get an overflow for some reason even though there's only one element on screen as indicated by the scroll bar:</p>
  
  <p><a href="https://i.stack.imgur.com/TV2WK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TV2WK.png" alt="enter image description here"></a></p>
  
  <p>And when I remove the CSS rules, I end up with this:</p>
  
  <p><a href="https://i.stack.imgur.com/aBh92.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aBh92.png" alt="enter image description here"></a></p>
  
  <p>Basically about 10% of the screen height only. I've considered using a fixed height, but I'm guessing it would look cut off if viewed on a larger or smaller monitor. I'd appreciate any help as I'm really not familiar with the full properties of angular material and how to properly manipulate them. Thanks in advance. </p>