Angular Material md-toolbar/md-content double scroll bar
<p>I am having an issue with my site creating two scroll bars. I am using md-toolbar for my nav (which I want to be stuck to the top throughout) and md-content to hold my content. When I scroll the nav stays stuck to the top but creates an extra scroll bar. (see to the right of the pic there is two scroll bars)</p>

<p><a href="https://i.stack.imgur.com/H8wQe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H8wQe.jpg" alt="see double scroll to right"></a></p>

<p>Here is my index.html: </p>

<pre><code>&lt;body ng-cloak ng-app="TrooNews" ng-controller="AppController as app"&gt;

        &lt;!--top toolbar--&gt;
        &lt;md-toolbar class="md-shadow-bottom-z-1"&gt;
            &lt;div class="md-toolbar-tools"&gt;
                &lt;md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-md1 aria-label="Menu"&gt;
                    &lt;md-icon&gt;menu&lt;/md-icon&gt;
                &lt;/md-button&gt;
                &lt;a href="/home"&gt;&lt;h1&gt;Troo News&lt;/h1&gt;&lt;/a&gt;
                &lt;span flex&gt;&lt;/span&gt;
                &lt;md-button class="md-icon-button" ng-click="" hide-gt-md1 aria-label="Search"&gt;
                    &lt;md-icon&gt;search&lt;/md-icon&gt;
                &lt;/md-button&gt;
            &lt;/div&gt;
        &lt;/md-toolbar&gt;

        &lt;!--left sidenav--&gt;
        &lt;div layout="row" layout-fill flex&gt;
            &lt;md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left"&gt;
                &lt;md-toolbar&gt;&lt;/md-toolbar&gt;
                &lt;md-content flex role="navigation"&gt;
                    &lt;md-list&gt;
                        &lt;md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)"&gt;
                            &lt;md-icon&gt;{{item.icon}}&lt;/md-icon&gt;
                            &lt;p&gt;{{item.title}}&lt;/p&gt;
                        &lt;/md-list-item&gt;
                    &lt;/md-list&gt;
                &lt;/md-content&gt;
            &lt;/md-sidenav&gt;
            &lt;div layout="column" layout-fill ng-viewport&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div ng-view class="content"&gt;&lt;/div&gt;

    &lt;/body&gt;
</code></pre>

<p>And my html for my card view:</p>

<pre><code>&lt;md-content class="container-fluid"&gt;
    &lt;section class="content-section"&gt;
      &lt;div layout="column" layout-align="center" ng-style="{'width': '100%'}"&gt;
        &lt;div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap&gt;
          &lt;md-card ng-repeat="article in home.articles"&gt;
            &lt;img ng-src="{{article.imagePath}}" class="md-card-image" alt="Test image"&gt;
            &lt;md-card-title&gt;
              &lt;md-card-title-text&gt;
                &lt;a href="/article/{{article.id}}"&gt;&lt;span class="md-headline"&gt;{{article.title}}&lt;/span&gt;&lt;/a&gt;
              &lt;/md-card-title-text&gt;
            &lt;/md-card-title&gt;
            &lt;md-card-content&gt;
              &lt;p&gt;
                {{article.text}}
              &lt;/p&gt;
            &lt;/md-card-content&gt;
            &lt;md-card-actions layout="row" layout-align="end center"&gt;
              &lt;md-button class="md-icon-button" aria-label="Report"&gt;
                &lt;md-icon class="material-icons"&gt;report problem&lt;/md-icon&gt;
              &lt;/md-button&gt;
              &lt;md-button class="md-icon-button" aria-label="Share"&gt;
                &lt;md-icon class="material-icons"&gt;share&lt;/md-icon&gt;
              &lt;/md-button&gt;
            &lt;/md-card-actions&gt;
          &lt;/md-card&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
&lt;/md-content&gt;
</code></pre>

<p>And my CSS: </p>

<pre><code>body {
    background-color: #EEEEEE;
}

md-toolbar {
    z-index: 100;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color:#3F51B5;
}

md-card {
    width:400px;
}
</code></pre>