Fix banner issue in ie11 (#19273) (#19326)

* fix banner issue in ie11

src/ui/public/chrome/directives/kbn_chrome.less

@@ -8,7 +8,8 @@ body {
 }
 
 .app-wrapper {
-  .real-flex-parent();
+  display: flex;
+  flex-flow: column nowrap;
   position: absolute;
   left: @global-nav-closed-width;
   top: 0;
@@ -31,6 +32,14 @@ body {
   }
 }
 
-  .app-wrapper-panel {
-    .flex-parent(@shrink: 0);
+.app-wrapper-panel {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-direction: column;
+
+  > * {
+    flex-shrink: 0;
   }
+}

src/ui/public/notify/banners/__snapshots__/global_banner_list.test.js.snap

@@ -4,25 +4,19 @@ exports[`GlobalBannerList is rendered 1`] = `null`;
 
 exports[`GlobalBannerList props banners is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium"
-  style="border:none"
+  class="globalBanner__list"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="flex-direction:column"
+    class="globalBanner__item"
+    data-test-priority="1"
   >
-    <div
-      class="euiFlexItem"
-      data-test-priority="1"
-    >
-      a component
-    </div>
-    <div
-      class="euiFlexItem"
-      data-test-subj="b"
-    >
-      b good
-    </div>
+    a component
+  </div>
+  <div
+    class="globalBanner__item"
+    data-test-subj="b"
+  >
+    b good
   </div>
 </div>
 `;

src/ui/public/notify/banners/global_banner_list.js

@@ -1,10 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-} from '@elastic/eui';
+
+import './global_banner_list.less';
 
 /**
  * GlobalBannerList is a list of "banners". A banner something that is displayed at the top of Kibana that may or may not disappear.
@@ -40,13 +37,6 @@ export class GlobalBannerList extends Component {
       return null;
     }
 
-    const panelStyle = {
-      border: 'none'
-    };
-    const flexStyle = {
-      flexDirection: 'column'
-    };
-
     const flexBanners = this.props.banners.map(banner => {
       const {
         id,
@@ -56,28 +46,21 @@ export class GlobalBannerList extends Component {
       } = banner;
 
       return (
-        <EuiFlexItem
-          grow={true}
+        <div
           key={id}
           data-test-priority={priority}
+          className="globalBanner__item"
           {...rest}
         >
           { component }
-        </EuiFlexItem>
+        </div>
       );
     });
 
     return (
-      <EuiPanel
-        style={panelStyle}
-      >
-        <EuiFlexGroup
-          style={flexStyle}
-          gutterSize="s"
-        >
-          {flexBanners}
-        </EuiFlexGroup>
-      </EuiPanel>
+      <div className="globalBanner__list">
+        {flexBanners}
+      </div>
     );
   }
 }

src/ui/public/notify/banners/global_banner_list.less

@@ -0,0 +1,7 @@
+.globalBanner__list {
+  padding: 16px;
+}
+
+.globalBanner__item + .globalBanner__item {
+  margin-top: 16px;
+}

src/ui/public/styles/base.less

@@ -57,7 +57,8 @@ ul.navbar-inline li {
   }
 
 .content {
-  .real-flex-parent(@flow: row nowrap);
+  display: flex;
+  flex-flow: row nowrap;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -72,10 +73,18 @@ ul.navbar-inline li {
 }
 
 .application {
-  .flex-parent(@shrink: 0);
   position: relative;
   z-index: 0;
   background-color: @white;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-direction: column;
+
+  > * {
+    flex-shrink: 0;
+  }
 }
 
 .top-fixed {

src/ui/public/styles/mixins.less

@@ -10,11 +10,6 @@
     flex-shrink: 0;
   }
 }
-.real-flex-parent(@flow: column nowrap) {
-  display: flex;
-  flex-flow: @flow;
-}
-
 
 .ellipsis() {
   white-space: nowrap;

x-pack/plugins/monitoring/public/components/cluster/overview/helpers.js

@@ -64,7 +64,7 @@ export function ClusterItemContainer(props) {
             <EuiFlexItem grow={false}>
               <EuiIcon type={icon} size="l" />
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiTitle>
                 <h2>
                   { props.title }