From b59cf3610dcae7181dfd80eb85fb79ae32227bf8 Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Wed, 17 Jan 2018 14:04:57 -0800
Subject: [PATCH] Set FlexGroup to grow: 1 to be more friendly with IE11 (#315)

Apply flex-grow to EuiFlexGroup for nested ie11 bug
---
 src-docs/src/views/flex/flex_nest.js | 11 +++++++++--
 src/components/flex/_flex_group.scss |  8 +++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/flex/flex_nest.js b/src-docs/src/views/flex/flex_nest.js
index 8687c34274c..5fe3b7041a2 100644
--- 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
index ea9d9a51cfe..40917de374f 100644
--- 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 */
   }
 }