title: md-content does not consume full height of the parent element
body: <pre><code>&lt;md-content flex class="md-padding page-content"&gt;
      &lt;div ui-view flex layout="column"&gt;   
         &lt;div class="center" layout="row" flex&gt;
          &lt;md-content layout="column" flex="30"&gt;
            &lt;md-list-item ng-repeat="entity in vm.entities"&gt;
              &lt;md-checkbox ng-model="entity.selected"&gt;&lt;/md-checkbox&gt;
              &lt;p&gt;{{entity.info}}&lt;/p&gt;
              &lt;md-icon class="md-secondary"
                       ng-click="doSecondaryAction($event)" aria-label="Chat"&gt;message&lt;/md-icon&gt;
            &lt;/md-list-item&gt;
          &lt;/md-content&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
          &lt;md-content layout="column" flex="70"&gt;
            Details here!
          &lt;/md-content&gt; 
        &lt;/div&gt; 
       &lt;/div&gt;   
   &lt;/md-content&gt;
  </code></pre>
  
  <p>In my code above, the outermost md-content occupies the complete page; however with the ui-view gived column layout and flex class, I expected it to occupy the complete height of the page, however it occupies the height consumed by the content only.</p>
  
  <p>Can you please help with the error in the code, so ui-view can occupy the complete page?</p>