title: how to make md-sidenav push content to the right instead of overlapping it?
body: <p>Is there any way I can make the side nav sticky so that when the side nav opens, it pushes the content of the page to the right instead of just overlapping it like <a href="https://inbox.google.com/" rel="nofollow">https://inbox.google.com/</a> ? </p>
  
  <p>Here is the <a href="https://plnkr.co/edit/X1CSbSyIu1JoPl5S9r7L?p=preview" rel="nofollow"><strong>plunker link</strong></a> of my sample work </p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- Angular Material style sheet --&gt;
      &lt;link rel="stylesheet"
            href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="BlankApp" layout="column" ng-cloak ng-controller="AppCtrl"&gt;
  &lt;md-toolbar class="md-whiteframe-7dp" layout="row"&gt;
      &lt;md-button class="menu" ng-click="toggleSidenav();"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/md-button&gt;
      &lt;h3&gt;Hello Toolbar&lt;/h3&gt;
  &lt;/md-toolbar&gt;
  
  &lt;md-content id="body-part" flex layout="row" layout-fill&gt;
      &lt;md-sidenav md-disable-backdrop class="md-whiteframe-7dp" md-component-id="left-side-nav"
                  flex style="background: cyan"&gt;
          &lt;span&gt;Hello Nav..!!&lt;/span&gt;
      &lt;/md-sidenav&gt;
      &lt;div flex style="padding: 10px;overflow-y: scroll; background: darkcyan"&gt;
          &lt;span&gt;Hello Content...!&lt;/span&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/md-content&gt;
  
  
  &lt;!-- Angular Material requires Angular.js Libraries --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Angular Material Library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Your application bootstrap  --&gt;
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>