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; }

Try this for main css class

main { 
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px; 
}