title: Angular Material mat-drawer in full height flex, content overflow auto
body: <p>Yesterday I faced a CSS issue which seems to be related to <code>mat-drawer</code> and Angulars <code>router-outlet</code>. I have got a fullpage flexbox with two children. A <code>mat-toolbar</code> at the top and a custom component <code>app-sidenav</code> at the bottom. This works fine and the app-sidenav fills the rest of the page since the flexbox is stretchy. Have a look at this simplified setting before continue:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
    &lt;mat-toolbar&gt;&lt;/mat-toolbar&gt;
    &lt;app-sidenav&gt;&lt;/app-sidenav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The related css is</p>
  
  <pre class="lang-css prettyprint-override"><code>.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
  mat-toolbar { flex: 0 0 auto; }
  app-sidenav { flex: 1 1 0; }
  </code></pre>
  
  <p>In the <strong>app-sidenav</strong> component I now have the following template</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-drawer-container&gt;
    &lt;mat-drawer&gt;&lt;/mat-drawer&gt;
    &lt;mat-drawer-content&gt;
      &lt;main&gt;&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;/main&gt;
    &lt;/mat-drawer-content&gt;
  &lt;/mat-drawer-container&gt;
  </code></pre>
  
  <p>And the related styles are</p>
  
  <pre class="lang-css prettyprint-override"><code>mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
  main { height: 100%; overflow-y: auto; }
  </code></pre>
  
  <p>This works fine and the height is appropriate unless there is no content larger than the <code>app-sidenav</code> height. The scrollbar appears at the outer flexbox component and not at the <code>main</code>-tag. I also tested <code>!important</code> at the heights and also <code>100vh</code> but with no success. So how can I get the <code>overflow-y</code> at the main tag working?</p>
  
  <p>I'm pretty sure that there is a simply trick, but I can't get it for know. Thanks for your help.
  Cheers!</p>
  
  <hr>
  
  <p>Edit: </p>
  
  <p>I made a <a href="https://stackblitz.com/edit/mat-drawer-routeroutlet-and-flex" rel="noreferrer">stackblitz</a> for this issue. When you navigate to the <em>ciao</em> component you see that the scrollbar appears at the document root and not in the main tag.</p>