title: Angular material md-content uses it's own Y scroll bar
body: <p>Using Angular 1.* and angular-material.</p>
  
  <p>I am having a issue with views that plug into <code>&lt;div ng-view&gt;&lt;/div&gt;</code> and <code>md-content</code>. If the height of the view is larger than the view port. It creates it's own Y scroll bar, so then I have 2 Y-scroll bars next to each other. </p>
  
  <p>I can do <code>overflow-y: hidden</code> on the <code>md-content</code>. But how can I make it to where the view pushes the viewport horizontally so the outer scroll bar is used only?</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
       &lt;md-toolbar class='md-medium-tall'&gt;
         &lt;div class="main-title"&gt;
           &lt;img src="./images/yo-small.png"&gt;
           &lt;p class="top-title"&gt;foo&lt;/p&gt;
           &lt;h5&gt;Bar&lt;/h5&gt;
         &lt;/div&gt;
       &lt;/md-toolbar&gt;
  
       &lt;div class="menu-container" layout="row"&gt;
          &lt;md-sidenav
            md-is-locked-open="$mdMedia('min-width: 900px')" 
            class="md-sidenav-left"
            md-whiteframe="0"&gt;
  
            &lt;md-menu-content&gt;
              &lt;md-menu-item&gt;
                &lt;md-button href="#ppv"&gt;
                  &lt;md-icon class="material-icons" menu-align-target=""&gt;assessment&lt;/md-icon&gt;
                    PPV&lt;/md-button&gt;
              &lt;/md-menu-item&gt;
            &lt;/md-menu-content&gt;
  
          &lt;/md-sidenav&gt;
  
          &lt;md-content&gt;
            &lt;div ng-view&gt;&lt;/div&gt;
          &lt;/md-content&gt;
       &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div style="height: 1000px; width: 800px "&gt;
    &lt;h1&gt;mom&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TzzTZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TzzTZ.png" alt="enter image description here"></a></p>
  
  <p>UPDATE: I was able to create a hack to fix this. Can anyone see how to make this work as it should?</p>
  
  <pre><code>md-content {
    overflow-y: hidden;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>angular.module('app')
    .controller('PPVCtrl', ['$scope', function($scope) {
  
  
      // fix for angular-material responsive issue
      document.body.style.height = "800px";
      $scope.$on('$destroy', function() {
        document.body.style.height = "100%";
      });
    }]);
  </code></pre>