fix(layout): Fix IE align-items: center issue.

src/components/checkbox/demoSyncing/index.html

@@ -1,10 +1,10 @@
 <div ng-controller="AppCtrl" class="md-padding" ng-cloak>
-  <div layout="row">
+  <div layout="row" layout-wrap>
 
-    <div flex="50" flex-md="100" layout="column">
-      <fieldset class="standard" flex>
+    <div flex="100" flex-gt-sm="50" layout="column">
+      <fieldset class="standard">
         <legend>Using <code>md-checkbox</code> with <code>ng-checked</code></legend>
-        <div layout="row" layout-wrap>
+        <div layout="row" layout-wrap flex>
           <div flex="50" ng-repeat="item in items">
             <md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
               {{ item }} <span ng-if="exists(item, selected)">selected</span>
@@ -14,13 +14,14 @@
       </fieldset>
     </div>
 
-    <div flex="50" flex-md="100" layout="column">
-      <fieldset class="standard" flex>
+    <div flex="100" flex-gt-sm="50" layout="column">
+      <fieldset class="standard">
         <legend>Using <code>&lt;input type="checkbox"&gt;</code></legend>
-        <div layout="row" layout-wrap>
+        <div layout="row" layout-wrap flex>
           <div ng-repeat="item in items" class="standard" flex="50">
             <label>
-              <input type="checkbox" ng-checked="exists(item, selected)" ng-click="toggle(item, selected)"/>
+              <input type="checkbox" ng-checked="exists(item, selected)"
+                     ng-click="toggle(item, selected)"/>
               {{ item }}
             </label>
           </div>

src/components/checkbox/demoSyncing/style.css

@@ -27,4 +27,5 @@ div.standard {
 fieldset.standard {
   border-style: solid;
   border-width: 1px;
+  height: 100%;
 }

src/components/menu/demoMenuPositionModes/index.html

@@ -4,7 +4,7 @@ <h2 class="md-title">Position Mode Demos</h2>
     <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
     <hr/>
     <h3 class="md-subhead">Target-Based Position Modes</h3>
-    <div class="menus"  layout-wrap layout="row" layout-align="space-between center">
+    <div class="menus"  layout-wrap layout="row" layout-fill layout-align="space-between center">
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Target Mode Positioning (default)</p>
         <md-menu>

src/components/menu/demoMenuWidth/index.html

@@ -2,7 +2,7 @@
   <div class="menu-demo-container" layout-align="center center" layout="column">
     <h2 class="md-title">Different Widths</h2>
     <p><code>md-menu-content</code> may specify a <code>width</code> attribute which will follow the <a href="http://www.google.com/design/spec/components/menus.html#menus-specs">official spec</a>.</p>
-    <div class="menus" layout-wrap layout="row" layout-align="space-between center">
+    <div class="menus" layout-wrap layout="row" layout-fill layout-align="space-between center">
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Wide menu (<code>width=6</code>)</p>
         <md-menu md-offset="0 -7">

src/components/menu/demoMenuWidth/style.css

@@ -5,8 +5,3 @@
 .menu-demo-container {
   min-height: 200px;
 }
-
-
-.menus {
-  width: 100%;
-}

src/core/services/layout/layout.scss

@@ -285,7 +285,17 @@
   {
     align-items: center;
     max-width: 100%;
+  }
 
+  // Cross Axis Center IE overflow fix
+  .#{$name}-center-center > *,
+  .#{$name}-start-center > *,
+  .#{$name}-end-center > *,
+  .#{$name}-space-between-center > *,
+  .#{$name}-space-around-center > *,
+  {
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
   // Cross Axis End