Angular Material Design - Fixed Side Bar

Question

How do i create a fixed side bar and a scrollable content. Like shown on their website.

https://material.angular.io/components/

I tried using this - https://material.angular.io/components/sidenav/examples

But it forces you to set the width and the height which i dont want to do as i want to use the full browser width and it be responsive.

.example-sidenav-fab-container {
  width: 500px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

Answer 1

Position fixed does not work on the side nav as expected so you must set the width and height to fixed amount for the side nav to be fixed with a scrollable content.

Issue is documented and meant to be fixed in next release. https://github.com/angular/material2/issues/998

Temporary fix:

.mat-sidenav-content,
.mat-sidenav-container,
.mat-drawer-content {
    transform: none !important;
}