title: Mat drawer content scroll not working properly
body: <p>I have one header, one sidenav and one footer component as a shared module for my website. </p>
  
  <p><a href="https://i.stack.imgur.com/wXRku.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wXRku.jpg" alt="enter image description here"></a></p>
  
  <p>I am trying to create a form to search product inside sidenav content and for that I have created a layout module which look like below.</p>
  
  <p>default.html</p>
  
  <pre><code>&lt;app-header (toggleSideBarForMe)="sideBarToggler()"&gt;&lt;/app-header&gt;
  
  &lt;mat-drawer-container&gt;
      &lt;mat-drawer mode="side" [opened]="sideBarOpen"&gt;
          &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
      &lt;/mat-drawer&gt;
      &lt;mat-drawer-content&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/mat-drawer-content&gt;
  &lt;/mat-drawer-container&gt;
  
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>default.scss</p>
  
  <pre><code>:host {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  mat-drawer {
    width: 350px;
  }
  
  mat-drawer-container {
    height: 100%;
  }
  
  mat-drawer-content {
    padding: 20px;
  }
  </code></pre>
  
  <p>Everything is working fine but when I scroll down my search form page, footer overlaps my buttons like below.</p>
  
  <p><a href="https://i.stack.imgur.com/dOi9d.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dOi9d.jpg" alt="enter image description here"></a></p>
  
  <p>Can somebody tell me where I am doing wrong? Any kind of help would be appreciated.</p>
  
  <p>PS: I am not good in CSS so kind of hard to understand. I am also searching for solution on google meanwhile.</p>