main content scrolling should be independent of sidenav's scrolling/position

Bug, feature request, or proposal:

Bug + feature request .

#### What is the expected behavior?

<md-sidenav></md-sidenav> , <md-toolbar></md-toolbar>, and <md-content> inside <md-sidenav-layout> should be all fixed in position. Having their own independent scrolls if necessary. should behave like independent compnents.

Especially , <md-content> should be independent so that any component/router-outlet placed inside can scroll if necessary.

OUT OF THE BOX , there should be a sidenav-layout template/snippet and some directives for toolbar which can be given any structure wanted. toolbar directive like fixed="true/false"

Like,

<md-sidenav-layout>
    <md-sidenav #start mode="{{hasMedia('gt-xs') ? 'side' : 'over'}}" [opened]="true">


    </md-sidenav>

    <md-content>
        <md-toolbar color="warn">


        </md-toolbar>
        <div layout="column" layout-fill layout-align="top center">

            <div class="routerview">
                <router-outlet></router-outlet> // the only dynamically changing part in whole SPA should be scrolling without any styling. 
            </div>
        </div>
        <div flex></div>
    </md-content>
</md-sidenav-layout>

#### What is the current behavior?

The only way to enable scroll i found was on md-sidenav-layout, which scrolls whole layout. Changing any inner children postioning just adds to the mess.

Simply changing md-sidenav-layout to some div/section with layout="row" flex style="min-height: 100%;" scrolling works well. Except , the ‘over’ mode of md-sidenav is messed since there’s no md-sidenav-layout

#### What are the steps to reproduce?

http://plnkr.co/edit/ORA0KloDddgseMIOQ71i?p=preview

SO issue :- http://stackoverflow.com/questions/37857873/angular2-material-md-content-scrolling-issue

#### What is the use-case or motivation for changing an existing behavior?

To get more user-friendly control over material component styling and positions.

#### Which versions of Angular, Material, OS, browsers are affected?

Angular 2.0.0 RC , Material 2.0.0-alpha.5-2 , Browsers tested on chrome/mozilla

[uzumakinaruto123]

@Forusim

For now i have ditched material sidenav .

I am using http://purecss.io/ sidenav. with exampe here http://purecss.io/layouts/side-menu/. Only a 0.8 kb cdn link can make it.

Which is so straightforward and simple. nothing complicated plus responsive. I would recommend material team to follow purecss approach for sidemenu atleast.

[Forusim]

I totally agree, Fought like 3 hours to fix the toolbar at the top and get only the content scrolling. The mess happens mostly, when the md-sidenav-layout is wrapping everything but the md-sidenav in md-content element, which has on default the “display: block”. Adding css in the app.component is useless, because md-sidenav-layout is the host for the wrapping md-content. So the only workarround is this unglyness in a global css: md-sidenav-layout > md-content { display: flex !important; flex-direction: column !important; } Please remove the md-content wrapper or the “display:block” property.