Fix IE specific flexbox min-height issue

elastic · May 14, 2020 · 501fe48 · 501fe48
1 parent 6a3db2c
commit 501fe48
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
@@ -73,7 +73,10 @@
   display: flex;
   flex-flow: column nowrap;
   margin: 0 auto;
-  min-height: calc(100vh - #{$euiHeaderHeightCompensation});
+  // IE needs this to be "height" instead of "min-height"
+  // "min-height" causes a bug 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;