Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto

Angular Material mat-drawer in full height flex, content overflow auto

In addition to @Sakkeer's working solution I found another way without hacking the position attribute but with usage of flex. Just add (not replace) the following css rules to the existing styles.

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }

angular material mat-drawer issue with height

in case any dropped by this and had a similar problem.
i fixed this long ago by applying

.drawer-container {
  position: absolute;
  top:0;
  width: 100%;
  bottom: 0;
}

just make sure the parent has a position: relative

Mat drawer content scroll not working properly

If i understand correctly, the two buttons (red and blue) are on your search form page and it is scrolable.

Try to apply padding-bottom:<the height of footer>px on the container of search page.

Flex layout used in mat-drawer-content

Your issue comes from the fact that your items aren't stretched.

Start by giving your html and body tags a full height :

html, body {
  height: 100%;
}

Next, you have to make a main container, where you will put your header, container, and footer. This main container will be stretched and flexed.

<div class="container" fxLayout="column">
  <header fxFlex="10%"/>
  <drawer fxFlex/>
  <footer fxFlex="10%"/>
</div>

In this setup, your header and footer will take 10% of the page each, and the drawer will take the remaining space.

Can't get angular-material md-sidenav to be 100% height

Use fullscreen

<md-sidenav-layout fullscreen>

  <md-sidenav #start mode="over">
    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>

  <md-toolbar color="primary">
    <button md-button (click)="start.toggle()">Open Side Drawer</button>
    <span>Spellbook</span>
    <span class="demo-fill-remaining"></span>
  </md-toolbar>

  <div class="demo-sidenav-content">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-layout>

Material sidenav causing problem with translate and flex css properties

@ReneVanDerLende After thoroughly checking my project due to css properties set for mat-drawer-content as { width: 100% ; height: 100% } it interfered with the styles of box-empty-container, hence shifting that slightly towards right.

---

Related Topics