Angular2 Material layout setup

I had the same problem and this is the solution I developed.

Assuming you generated your project with angular-cli and installed the MaterialComponents in your application, here is the code layout for a fixed header and independently scrolled content and sidebar.

I'm using scss by the way.

first the app.component.html code

<md-toolbar>
  <span>App title</span>
  <span class="filler"></span>
  <span> right aligned text</span>
</md-toolbar>
<md-sidenav-container class="main-container">
  <md-sidenav class="main-sidenav" #sidenav mode="side" opened="true">
    <div class="nav-wrapper">
      <!-- this is here just to make the sidebar content scrollable -->
      <md-nav-list>
        <md-list-item *ngFor="let link of [1,2,3,4,5,6,7,8,9,10]">
          <a md-line href="...">nav list item {{ link }}</a>
          <button md-icon-button >
            icon
          </button>
        </md-list-item>
      </md-nav-list>
      <!-- this is here just to make the sidebar content scrollable -->
      <md-nav-list>
        <md-list-item *ngFor="let link of [1,2,3,4,5,6,7,8,9,10]">
          <a md-line href="...">nav list item 1{{ link }}</a>
          <button md-icon-button >
            icon
          </button>
        </md-list-item>
      </md-nav-list>
      <!-- this is here just to make the sidebar content scrollable -->
      <md-nav-list>
        <md-list-item *ngFor="let link of [1,2,3,4,5,6,7,8,9,10]">
          <a md-line href="...">nav list item 2{{ link }}</a>
          <button md-icon-button >
            icon
          </button>
        </md-list-item>
      </md-nav-list>
    </div>
  </md-sidenav>
  <div class="content-wrapper">
    <div class="main-content">
      <!-- this is here just to make the content scrollable -->
      Add a huge lorem ipsum here and you will see the results
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus </p>
    </div>
  </div>
</md-sidenav-container>

Now the scss code if you are using other css preprocessor the code will still work because i'm only nesting the css. Also, the filler class and the list item hover are not essential to layout.

Add this code to the main styles.scss file or you can create a layout.scss file and import into the main styles.scss file.

/* You can add global styles to this file, and also import other style files */
body {  margin:0;  padding:0; }

.main-container {
  width: 100vw;
  height: 100vh;
  //border: 1px solid #000;

  md-sidenav {
    width: 250px;
  }

  .mat-sidenav-content,
  md-sidenav {
    display: flex;
    overflow: visible;
  }

  .nav-wrapper {
    width:250px;
    // this is what makes the magic happens
    overflow: auto;
    // just to set the sidebar apart
    background: #efefef;
  }

  .content-wrapper {
    overflow: auto;
  }
  .main-content {
    padding: 20px;
  }

}

md-toolbar.mat-toolbar {
  // just to set the toolbar apart
  background-color: red;
}

.filler {
  flex: 1 1 auto;
}

md-list-item:hover {
  background: #666;
  color: white;
}

Here is a working example I created http://plnkr.co/edit/bMmapUPobeALmyIVbeRm?p=preview