title: mat-sidenav-content content is being overflowed behind the pages scrollbar
body: <p>I am running Angular 7 with Bootstrap and I am trying to setup <code>mat-sidenav-container</code> </p>
  
  <p>The issue I am facing is all the content inside <code>mat-sidenav-content</code> (which is the main content for the page) is overflowing behind the browsers scrollbar for the content.</p>
  
  <p>I have messed around with changing the overflow on this to no avail. I know adding a margin will probably fix it but I feel that it's messy cause some pages don't have a scroll bar.</p>
  
  <p>Is this something to do with bootstrap being used as I am using this example
  <a href="https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts" rel="nofollow noreferrer">https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts</a></p>
  
  <p><a href="https://i.stack.imgur.com/I34IU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I34IU.gif" alt="content overflowing behind scrollbar"></a></p>
  
  <p><a href="https://i.stack.imgur.com/A7Zo5.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A7Zo5.gif" alt="enter image description here"></a></p>