fix(layout): restore flex percentages

IE has issues with `calc()` usages in flex styles; replace with 33.33% and 66.66%.

  Closes #6898

docs/app/partials/layout-alignment.tmpl.html

@@ -2,7 +2,7 @@
 
   <p>
     The <code>layout-align</code> directive takes two words.
-    The first word says how the children will be aligned in the lay3ut's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
+    The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
 
     <p>Only one value is required for this directive.
     For example, <code>layout="row" layout-align="center"</code> would make the elements

src/core/services/layout/layout.attributes.scss

@@ -185,14 +185,14 @@ $layout-breakpoint-lg:     1920px !default;
   }
 
   [layout="row"], [layout#{$name}="row"] {
-    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 calc(100% / 3);  max-width: calc(100% / 3);  max-height: 100%; box-sizing: border-box; }
-    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 calc(200% / 3);  max-width: calc(200% / 3);  max-height: 100%; box-sizing: border-box; }
+    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
 
     > .flex { min-width: 0;   }
   }
   [layout="column"], [layout#{$name}="column"] {
-    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 calc(100% / 3);  max-width: 100%;  max-height: calc(100% / 3); box-sizing: border-box; }
-    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 calc(200% / 3);  max-width: 100%;  max-height: calc(200% / 3); box-sizing: border-box; }
+    > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+    > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
 
     > .flex { min-height: 0;  }
   }

src/core/services/layout/layout.scss

@@ -183,15 +183,15 @@
   }
 
   .layout-row, .layout#{$name}-row {
-    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 calc(100% / 3);  max-width: calc(100% / 3);  max-height: 100%; box-sizing: border-box; }
-    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 calc(200% / 3);  max-width: calc(200% / 3);  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
+    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
 
     // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
     > .flex                                       { min-width: 0;   }
   }
   .layout-column, .layout#{$name}-column {
-    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 calc(100% / 3);  max-width: 100%;  max-height: calc(100% / 3); box-sizing: border-box; }
-    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 calc(200% / 3);  max-width: 100%;  max-height: calc(200% / 3); box-sizing: border-box; }
+    > .#{$flexName}-33   , > .#{$flexName}-33     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
+    > .#{$flexName}-66   , > .#{$flexName}-66     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
 
     // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
     > .flex                                       { min-height: 0;  }