page shoud not scroll when using sidenav and toolbar together in angular material

Question

When I use md-sidenav without having md-toolbar, everything is OK. Means that, opening sidnav will perform correctly like image below.

But when I add a toolbar before a sidenav or before the section containing sidenav, Upon opening the sidenav the page will find scroll and sidenav will not fill the entire page's height(image below), while it should be the same as before. toolbar height size will add to the height of page.

complete code at plnkr

here is the main part of the code:

<div ng-controller="AppCtrl" layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools" layout="row" style="background-color:crimson">
            ...
        </div>
    </md-toolbar>

    <section layout="row" flex>
        <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            ...
        </md-sidenav>

        <md-content flex layout-padding>
            ...
        </md-content>

        <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
            ...
        </md-sidenav>
    </section>
</div>

Answer 1

I solved the problem with using different layout of page. Using md-sidenav before md-toolbar:

<div layout="row">
   <md-sidenav>        
   </md-sidenav>
   <div layout="column">
      <md-toolbar>
      </md-toolbar>
      <md-content>
      </md-content>
   </div>
</div>