Remove IE flex and display CSS fixes & fallbacks

src/components/badge/_badge.scss

@@ -43,7 +43,6 @@
 
   .euiBadge__childButton {
     @include euiTextTruncate;
-    flex: 1 1 auto; // Must be 1 and 1 for IE to properly truncate
     text-align: inherit;
     font-weight: inherit;
     line-height: inherit;
@@ -62,7 +61,6 @@
   }
 
   .euiBadge__iconButton {
-    flex: 0 0 auto;
     font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
     margin-left: $euiSizeXS;
 
@@ -84,13 +82,10 @@
 
   .euiBadge__text {
     @include euiTextTruncate;
-    flex: 1 1 auto;
     cursor: default;
   }
 
   .euiBadge__icon {
-    flex: 0 0 auto;
-
     &:not(:only-child) {
       margin-left: $euiSizeXS;
     }

src/components/card/card.styles.ts

@@ -117,7 +117,6 @@ export const euiCardStyles = (
         flex-grow: 0; /* 1 */
         font-size: 0;
         position: relative;
-        ${logicalCSS('min-height', '1px')}; /* 2 */
         ${logicalCSS('margin-bottom', spacing)};
       `,
 
@@ -149,11 +148,13 @@ export const euiCardStyles = (
       // ensure the parent is only as tall as the image
       ${logicalCSS('margin-bottom', `-${paddingAmount}`)};
 
-      // match border radius, minus 1px because it's inside a border
-      ${logicals['border-top-left-radius']}: calc(${euiTheme.border.radius
-        .medium} - 1px);
+      // match border radius, minus border width
+      ${logicalCSS(
+        'border-top-left-radius',
+        `calc(${euiTheme.border.radius.medium} - ${euiTheme.border.width.thin})`
+      )}
       ${logicals['border-top-right-radius']}: calc(${euiTheme.border.radius
-        .medium} - 1px);
+        .medium} - ${euiTheme.border.width.thin});
 
       ${color === 'transparent'
         ? `border-radius: ${euiTheme.border.radius.medium};`

src/components/flex/_flex_group.scss

@@ -1,16 +1,11 @@
-/**
- * 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 */
+  flex-grow: 1; // Grow nested flex-groups by default
 
   .euiFlexItem {
     flex-grow: 1;
-    flex-basis: 0%; /* 2 */
+    flex-basis: 0;
   }
 }
 

src/components/form/form_control_layout/_form_control_layout_delimited.scss

@@ -22,8 +22,6 @@
 
     .euiFormControlLayoutDelimited__input {
       height: 100%;
-      padding-top: 0; // Fixes IE
-      padding-bottom: 0; // Fixes IE
       padding-left: $euiFormControlCompressedPadding;
       padding-right: $euiFormControlCompressedPadding;
     }
@@ -66,7 +64,6 @@
     position: static; // Overrider absolute
     padding-left: $euiFormControlPadding;
     padding-right: $euiFormControlPadding;
-    flex-shrink: 0; // Fixes IE
 
     &:not(.euiFormControlLayoutIcons--right) {
       order: -1;

src/components/form/form_row/_form_row.scss

@@ -39,7 +39,6 @@
 
   .euiFormRow__label {
     hyphens: auto;
-    max-width: 100%; // Fixes IE
   }
 
   .euiFormRow__labelWrapper {

src/components/list_group/_list_group_item.scss

@@ -44,7 +44,7 @@
   padding: $euiSizeXS $euiSizeS;
   display: flex;
   align-items: center;
-  flex: 1 0 auto; // The flex-shrink and flex-basis values are needed for IE11
+  flex-grow: 1;
   text-align: left;
   max-width: 100%;
   font-weight: inherit;

src/components/modal/__snapshots__/confirm_modal.test.tsx.snap

@@ -38,70 +38,66 @@ Array [
         />
       </button>
       <div
-        class="euiModal__flex"
+        class="euiModalHeader"
       >
         <div
-          class="euiModalHeader"
+          class="euiModalHeader__title"
+          data-test-subj="confirmModalTitleText"
         >
-          <div
-            class="euiModalHeader__title"
-            data-test-subj="confirmModalTitleText"
-          >
-            <h1>
-              A confirmation modal
-            </h1>
-          </div>
+          <h1>
+            A confirmation modal
+          </h1>
         </div>
+      </div>
+      <div
+        class="euiModalBody"
+      >
         <div
-          class="euiModalBody"
+          class="euiModalBody__overflow"
         >
           <div
-            class="euiModalBody__overflow"
+            class="euiText emotion-euiText-m"
+            data-test-subj="confirmModalBodyText"
           >
-            <div
-              class="euiText emotion-euiText-m"
-              data-test-subj="confirmModalBodyText"
-            >
-              <p>
-                This is a confirmation modal example
-              </p>
-            </div>
+            <p>
+              This is a confirmation modal example
+            </p>
           </div>
         </div>
-        <div
-          class="euiModalFooter"
+      </div>
+      <div
+        class="euiModalFooter"
+      >
+        <button
+          class="euiButtonEmpty css-9t7nyf-empty-primary"
+          data-test-subj="confirmModalCancelButton"
+          type="button"
         >
-          <button
-            class="euiButtonEmpty css-9t7nyf-empty-primary"
-            data-test-subj="confirmModalCancelButton"
-            type="button"
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <span
-              class="euiButtonContent euiButtonEmpty__content"
+              class="euiButtonEmpty__text"
             >
-              <span
-                class="euiButtonEmpty__text"
-              >
-                Cancel Button Text
-              </span>
+              Cancel Button Text
             </span>
-          </button>
-          <button
-            class="euiButton emotion-euiButtonDisplay-m-m-fill-primary"
-            data-test-subj="confirmModalConfirmButton"
-            type="button"
+          </span>
+        </button>
+        <button
+          class="euiButton emotion-euiButtonDisplay-m-m-fill-primary"
+          data-test-subj="confirmModalConfirmButton"
+          type="button"
+        >
+          <span
+            class="emotion-euiButtonDisplayContent"
           >
             <span
-              class="emotion-euiButtonDisplayContent"
+              class="eui-textTruncate"
             >
-              <span
-                class="eui-textTruncate"
-              >
-                Confirm Button Text
-              </span>
+              Confirm Button Text
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>,
@@ -153,54 +149,50 @@ Array [
         />
       </button>
       <div
-        class="euiModal__flex"
+        class="euiModalHeader"
       >
         <div
-          class="euiModalHeader"
+          class="euiModalHeader__title"
+          data-test-subj="confirmModalTitleText"
         >
-          <div
-            class="euiModalHeader__title"
-            data-test-subj="confirmModalTitleText"
-          >
-            <h1>
-              A confirmation modal
-            </h1>
-          </div>
+          <h1>
+            A confirmation modal
+          </h1>
         </div>
-        <div
-          class="euiModalFooter"
+      </div>
+      <div
+        class="euiModalFooter"
+      >
+        <button
+          class="euiButtonEmpty css-9t7nyf-empty-primary"
+          data-test-subj="confirmModalCancelButton"
+          type="button"
         >
-          <button
-            class="euiButtonEmpty css-9t7nyf-empty-primary"
-            data-test-subj="confirmModalCancelButton"
-            type="button"
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
           >
             <span
-              class="euiButtonContent euiButtonEmpty__content"
+              class="euiButtonEmpty__text"
             >
-              <span
-                class="euiButtonEmpty__text"
-              >
-                Cancel Button Text
-              </span>
+              Cancel Button Text
             </span>
-          </button>
-          <button
-            class="euiButton emotion-euiButtonDisplay-m-m-fill-primary"
-            data-test-subj="confirmModalConfirmButton"
-            type="button"
+          </span>
+        </button>
+        <button
+          class="euiButton emotion-euiButtonDisplay-m-m-fill-primary"
+          data-test-subj="confirmModalConfirmButton"
+          type="button"
+        >
+          <span
+            class="emotion-euiButtonDisplayContent"
           >
             <span
-              class="emotion-euiButtonDisplayContent"
+              class="eui-textTruncate"
             >
-              <span
-                class="eui-textTruncate"
-              >
-                Confirm Button Text
-              </span>
+              Confirm Button Text
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>,

src/components/modal/__snapshots__/modal.test.tsx.snap

@@ -37,11 +37,7 @@ Array [
           data-euiicon-type="cross"
         />
       </button>
-      <div
-        class="euiModal__flex"
-      >
-        children
-      </div>
+      children
     </div>
   </div>,
   <div

src/components/modal/_modal.scss

@@ -1,15 +1,11 @@
-/**
- * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
- *    flex display. https://github.com/philipwalton/flexbugs#flexbug-3
- * 2. IE has trouble with min-widths on flex elements. Use the pixel value
- *    from our forms since that's usually the smallest we want them.
- */
-
 .euiModal {
   border: $euiBorderThin;
   // This mixin overwrites some of the border above
   @include euiBottomShadowLarge; // sass-lint:disable-line mixins-before-declarations
-  display: flex; /* 1 */
+  display: flex;
+  flex-direction: column;
+  max-height: 75vh; // We overflow the modal body based off this
+  overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
 
   position: relative;
   background-color: $euiColorEmptyShade;
@@ -23,14 +19,6 @@
   &:focus {
     outline: none;
   }
-
-  .euiModal__flex { /* 1 */
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    max-height: 75vh; // We overflow the modal body based off this
-    overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
-  }
 }
 
 .euiModal--maxWidth-default {
@@ -123,6 +111,7 @@
     width: 100vw !important;
     max-width: none !important;
     min-width: 0 !important;
+    max-height: 100vh;
     left: 0;
     right: 0;
     bottom: 0;
@@ -134,10 +123,6 @@
       @include euiBottomShadowLarge($reverse: true);
       top: auto;
     }
-
-    .euiModal__flex { /* 1 */
-      max-height: 100vh;
-    }
   }
 
   .euiModalHeader {

src/components/modal/modal.tsx

@@ -99,7 +99,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
               />
             )}
           </EuiI18n>
-          <div className="euiModal__flex">{children}</div>
+          {children}
         </div>
       </EuiFocusTrap>
     </EuiOverlayMask>

src/components/page/page_content/_page_content.scss

@@ -18,7 +18,6 @@
 
   &.euiPageContent--horizontalCenter {
     width: auto;
-    max-width: 100%; // Fixes IE
     margin-left: auto;
     margin-right: auto;
     flex-grow: 0; // Offsets the properties of .euiPanel within flexboxes

src/components/table/_responsive.scss

@@ -152,7 +152,6 @@
     }
 
     .euiTableRowCell {
-      display: block; /* IE requires block to grow and wrap. */
       min-width: 50%;
       border: none;
     }