Set FlexGroup to grow: 1 to be more friendly with IE11 (#315)

Apply flex-grow to EuiFlexGroup for nested ie11 bug
elastic · Jan 17, 2018 · b59cf36 · b59cf36
1 parent 15b2c31
commit b59cf36
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src-docs/src/views/flex/flex_nest.js b/src-docs/src/views/flex/flex_nest.js
@@ -10,9 +10,16 @@ import {
 export default () => (
   <div>
     <EuiFlexGroup>
-      <EuiFlexItem grow={false}>Group One</EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <div>Group Two</div>
+        <div>Flex Group</div>
+        <EuiSpacer />
+        <EuiFlexGroup>
+          <EuiFlexItem>Nested Grid One</EuiFlexItem>
+          <EuiFlexItem>Nested Grid Two</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <div>Flex Grid</div>
         <EuiSpacer />
         <EuiFlexGrid columns={3}>
           <EuiFlexItem>Nested Grid One</EuiFlexItem>

diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
@@ -1,10 +1,16 @@
+/**
+ * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements.
+ * 2. IE requires a unit to grow.
+ */
+
 .euiFlexGroup {
   display: flex;
   align-items: stretch;
+  flex-grow: 1; /* 1 */
 
   .euiFlexItem {
     flex-grow: 1;
-    flex-basis: 0%;
+    flex-basis: 0%; /* 1 */
   }
 }