From cf6fc28e518fd3e4ab339f5a9752cb259edca3af Mon Sep 17 00:00:00 2001
From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com>
Date: Tue, 19 May 2020 11:56:56 +0300
Subject: [PATCH] Fix IE specific flexbox min-height issue (#66555) (#66961)

* Fix IE specific flexbox min-height issue

* Use internetExplorerOnly mixin

* Fix other issues in IE

* Add a comment

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 src/core/public/rendering/_base.scss                        | 6 ++++++
 src/plugins/vis_default_editor/public/_default.scss         | 3 +--
 src/plugins/vis_default_editor/public/_sidebar.scss         | 5 +++++
 .../public/components/sidebar/sidebar.tsx                   | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index 8032bc458822f4..1f9e35e62ddcc7 100644
--- a/src/core/public/rendering/_base.scss
+++ b/src/core/public/rendering/_base.scss
@@ -75,6 +75,12 @@
   margin: 0 auto;
   min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 
+  @include internetExplorerOnly {
+    // IE specific bug with min-height in flex container, described in the next link
+    // https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+    height: calc(100vh - #{$euiHeaderHeightCompensation});
+  }
+
   &.hidden-chrome {
     min-height: 100vh;
   }
diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss
index 2187baea547da9..f189b1c9e64a1f 100644
--- a/src/plugins/vis_default_editor/public/_default.scss
+++ b/src/plugins/vis_default_editor/public/_default.scss
@@ -70,8 +70,7 @@
 
 .visEditor__visualization {
   display: flex;
-  flex-basis: 100%;
-  flex: 1;
+  flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens
   overflow: hidden;
 
   @include euiBreakpoint('xs', 's', 'm') {
diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss
index ed92dc1dae8849..42f7c4e6a892ce 100644
--- a/src/plugins/vis_default_editor/public/_sidebar.scss
+++ b/src/plugins/vis_default_editor/public/_sidebar.scss
@@ -4,6 +4,11 @@
 
 .visEditorSidebar {
   min-width: $vis-editor-sidebar-min-width;
+
+  // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586
+  > .visEditorSidebar__formWrapper {
+    flex-basis: auto;
+  }
 }
 
 .visEditorSidebar__form {
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx
index 9dfeae1815d1a7..68b7ab06c4875f 100644
--- a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx
+++ b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx
@@ -177,7 +177,7 @@ function DefaultEditorSideBar({
         gutterSize="none"
         responsive={false}
       >
-        <EuiFlexItem>
+        <EuiFlexItem className="visEditorSidebar__formWrapper">
           <form
             className="visEditorSidebar__form"
             name="visualizeEditor"