diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index 8032bc458822f..1f9e35e62ddcc 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 2187baea547da..f189b1c9e64a1 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 ed92dc1dae884..42f7c4e6a892c 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 9dfeae1815d1a..68b7ab06c4875 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"