Angular Material Sidenav不覆盖Scroll上的全屏

Question

On scroll, Sidenav is not taking 100% of the screen and it's also scrolling.

<div layout="column">
    <section layout="row" flex>
        <!-- sidenav content -->
        <md-sidenav class="md-sidenav-left"
                    md-component-id="left"
                    md-whiteframe="20"
                    flex>
            <md-content layout-padding></md-content>
        </md-sidenav>
        <md-content flex layout-padding>
            <!-- page content -->
            <md-content>Page Content</md-content>
        </md-content>
    </section>
</div>

Answer 1

Simply place the md-sidenav outside of the div :

<!-- sidenav content -->
<md-sidenav class="md-sidenav-left"
    md-component-id="left"
    md-whiteframe="20"
    flex>
    <md-content layout-padding></md-content>
</md-sidenav>
<div layout="column">
    <section layout="row" flex>
        <md-content flex layout-padding>
            <!-- page content -->
            <md-content>Page Content</md-content>
        </md-content>
    </section>
</div>

Codepen Demo