title: Layout inconsistencies in chrome and IE11/Edge
body: <p>I have a layout that is working 100% correct in chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/uUc60.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uUc60.png" alt="enter image description here"></a></p>
  
  <p>but viewing it in IE 11 or edge it is displaying a extra scrollbar because the page is now bigger than the browser height:</p>
  
  <p><a href="https://i.stack.imgur.com/xhw04.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xhw04.png" alt="enter image description here"></a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;body ng-app="MyApp" layout="column" layout-fill&gt;
  
    &lt;div layout="column" layout-fill&gt;
  
      &lt;md-toolbar class="md-tall-xl"&gt;
        &lt;div class="md-toolbar-tools"&gt;
          &lt;h2 class="md-flex"&gt;Toolbar &lt;/h2&gt;
        &lt;/div&gt;
        &lt;md-tabs class="tab-left-padding"&gt;
          &lt;md-tab&gt;
            &lt;md-tab-label&gt;Item One&lt;/md-tab-label&gt;
          &lt;/md-tab&gt;
          &lt;md-tab&gt;
            &lt;md-tab-label&gt;Item two&lt;/md-tab-label&gt;
          &lt;/md-tab&gt;
        &lt;/md-tabs&gt;
      &lt;/md-toolbar&gt;    
  
      &lt;md-content class="visableOverflow bg" layout="row" flex layout-fill layout-margin style="padding:8px;"&gt;    
  
        &lt;md-whiteframe class="md-whiteframe-z1 overTheToolbar working-bg" layout="column" flex&gt;
  
          &lt;md-content layout="column" layout-margin&gt;
  
            Lorem ipsum ...
  
          &lt;/md-content&gt;
  
        &lt;/md-whiteframe&gt;   
  
      &lt;/md-content&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code> .bg {
        background-color: #E0E0E0;
      }
  
      md-toolbar.md-tall-xl {
        height: 192px;
        min-height: 192px;
        max-height: 192px;
      }
  
      .overTheToolbar {
        margin-top: -72px!important;
        z-index: 3;
      }
  
      .visableOverflow {
        overflow: visible;
      }
  
      .working-bg {
        background-color: white;
      }
  
      .tab-left-padding {
        padding-left: 15px;
      }
  </code></pre>
  
  <p>I Tried to get IE11/Edge to render it the same as chrome does but can't seem to get it to work. I did check <a href="https://github.com/philipwalton/flexbugs" rel="nofollow noreferrer">https://github.com/philipwalton/flexbugs</a> if there is issues but seems none are related to my problem.</p>
  
  <p>Any ideas? </p>
  
  <p>Here is the codepen: <a href="http://codepen.io/qorsmond/pen/aOPPPp" rel="nofollow noreferrer">http://codepen.io/qorsmond/pen/aOPPPp</a></p>