title: How to make sure that content never scrolls under a fixed material toolbar?
body: <p>The below demo as a material toolbar that is styled like this:</p>
  
  <pre><code>mat-toolbar {
      display:flex;
      position: fixed;
      justify-content: space-between;
  }
  
  </code></pre>
  
  <h2>Full screen</h2>
  
  <p><a href="https://angular-material-toolbar-fixed-with-styling.stackblitz.io/" rel="nofollow noreferrer">https://angular-material-toolbar-fixed-with-styling.stackblitz.io/</a></p>
  
  <h2>Stackblitz</h2>
  
  <p><a href="https://stackblitz.com/edit/angular-material-toolbar-fixed-with-styling?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material-toolbar-fixed-with-styling?file=src%2Fapp%2Fapp.component.ts</a></p>
  
  <p>How should we keep the lorem ipsum text from scrolling under the fixed toolbar?</p>
  
  <p>I tried wrapping the <code>router-outlet</code> in a div and putting a <code>margin-top: 2rem</code> on the div, but this moves the toolbar down as can be seen in the demo.</p>