diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index e01fc8ab0dc..4443aa1366f 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -66,7 +66,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 }
 
 .guidePageContent {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   padding: $euiSize $euiSizeXL;
   min-height: 100vh;
   background-color: $euiColorEmptyShade;
diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
index b8159471920..ad03f210a84 100644
--- a/src-docs/src/views/flex/flex_example.js
+++ b/src-docs/src/views/flex/flex_example.js
@@ -15,6 +15,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlexGrid,
+  EuiLink,
 } from '../../../../src/components';
 
 import FlexGroup from './flex_group';
@@ -121,11 +122,21 @@ export const FlexExample = {
       code: flexGroupWrapHtml,
     }],
     text: (
-      <p>
-        You can set <EuiCode>wrap</EuiCode> on <EuiCode>FlexGroup</EuiCode> if it
-        contains <EuiCode>FlexItem</EuiCode>s with minimum widths, which you want to wrap as
-        the container becomes narrower.
-      </p>
+      <Fragment>
+        <p>
+          You can set <EuiCode>wrap</EuiCode> on <EuiCode>FlexGroup</EuiCode> if it
+          contains <EuiCode>FlexItem</EuiCode>s with minimum widths, which you want to wrap as
+          the container becomes narrower.
+        </p>
+        <EuiCallOut color="warning" title="IE Warning">
+          <p>
+            IE11 does not properly wrap flex items if the <strong>group</strong> is also within a flex item.
+            To fix this rendering issue, you need to add a class of <EuiCode>.euiIEFlexWrapFix</EuiCode> to the flex-item
+            that <strong>contains</strong> the wrapping group.
+          </p>
+        </EuiCallOut>
+      </Fragment>
+
     ),
     demo: <div className="guideDemo__highlightGrid"><FlexGroupWrap /></div>,
   }, {
@@ -286,11 +297,21 @@ export const FlexExample = {
       code: flexNestHtml,
     }],
     text: (
-      <p>
-        <EuiCode>FlexGroup</EuiCode> and <EuiCode>FlexGrid</EuiCode> can nest
-        within themselves indefinitely. For example, here we turn off the growth on a
-        <EuiCode>FlexGroup</EuiCode>, then nest a grid inside of it.
-      </p>
+      <Fragment>
+        <p>
+          <EuiCode>FlexGroup</EuiCode> and <EuiCode>FlexGrid</EuiCode> can nest
+      within themselves indefinitely. For example, here we turn off the growth on a
+          <EuiCode>FlexGroup</EuiCode>, then nest a grid inside of it.
+        </p>
+        <EuiCallOut color="warning" title="IE11 Warning">
+          <p>
+            Nesting can cause some nasty bugs in IE11. There is no generalized way to fix IE
+            without knowing the exact intention of the layout. Please refer
+            to <EuiLink href="https://github.com/philipwalton/flexbugs">Flexbugs</EuiLink> if
+            you see rendering issues in IE.
+          </p>
+        </EuiCallOut>
+      </Fragment>
     ),
     demo: <div className="guideDemo__highlightGrid"><FlexNest /></div>,
   }, {
diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
index 76ddaa7117c..2ce5d5e3b71 100644
--- a/src-docs/src/views/home/home_view.js
+++ b/src-docs/src/views/home/home_view.js
@@ -7,10 +7,6 @@ import imageForms from '../../images/forms.svg';
 import imageFlexgrid from '../../images/flexgrid.svg';
 import imageCards from '../../images/cards.svg';
 
-import {
-  Link,
-} from 'react-router';
-
 import {
   EuiCard,
   EuiFlexGrid,
@@ -92,70 +88,64 @@ export const HomeView = () => (
     <EuiSpacer />
     <EuiFlexGrid gutterSize="l" columns={3}>
       <EuiFlexItem>
-        <Link to="/display/icons">
-          <EuiCard
-            textAlign="left"
-            image={imageIcons}
-            isClickable
-            title="Icons"
-            description="Our SVG icon library gives you full control over size and color"
-          />
-        </Link>
+        <EuiCard
+          href="#/display/icons"
+          textAlign="left"
+          image={imageIcons}
+          isClickable
+          title="Icons"
+          description="Our SVG icon library gives you full control over size and color"
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/navigation/button">
-          <EuiCard
-            textAlign="left"
-            image={imageButtons}
-            title="Buttons"
-            isClickable
-            description="Buttons for every usage you might need."
-          />
-        </Link>
+        <EuiCard
+          href="#/navigation/button"
+          textAlign="left"
+          image={imageButtons}
+          title="Buttons"
+          isClickable
+          description="Buttons for every usage you might need."
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/layout/flex">
-          <EuiCard
-            textAlign="left"
-            image={imageFlexgrid}
-            title="Flexible layouts"
-            description="Create layouts by using flex groups, grids and items"
-            isClickable
-          />
-        </Link>
+        <EuiCard
+          href="#/layout/flex"
+          textAlign="left"
+          image={imageFlexgrid}
+          title="Flexible layouts"
+          description="Create layouts by using flex groups, grids and items"
+          isClickable
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/display/tables">
-          <EuiCard
-            textAlign="left"
-            image={imageTables}
-            title="Tables"
-            isClickable
-            description="Build tables from individual components or high level wrappers"
-          />
-        </Link>
+        <EuiCard
+          href="#/display/tables"
+          textAlign="left"
+          image={imageTables}
+          title="Tables"
+          isClickable
+          description="Build tables from individual components or high level wrappers"
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/display/card">
-          <EuiCard
-            textAlign="left"
-            image={imageCards}
-            title="Cards"
-            description="Cards like these help you make repeatable content more presentable"
-            isClickable
-          />
-        </Link>
+        <EuiCard
+          href="#/display/card"
+          textAlign="left"
+          image={imageCards}
+          title="Cards"
+          description="Cards like these help you make repeatable content more presentable"
+          isClickable
+        />
       </EuiFlexItem>
       <EuiFlexItem>
-        <Link to="/forms/form-layouts">
-          <EuiCard
-            textAlign="left"
-            image={imageForms}
-            title="Forms"
-            isClickable
-            description="Input tags, layouts and validation for your forms"
-          />
-        </Link>
+        <EuiCard
+          href="#/forms/form-layouts"
+          textAlign="left"
+          image={imageForms}
+          title="Forms"
+          isClickable
+          description="Input tags, layouts and validation for your forms"
+        />
       </EuiFlexItem>
     </EuiFlexGrid>
     <EuiSpacer />
diff --git a/src-docs/src/views/image/image_zoom.js b/src-docs/src/views/image/image_zoom.js
index 38f791edfb2..22c43a673ce 100644
--- a/src-docs/src/views/image/image_zoom.js
+++ b/src-docs/src/views/image/image_zoom.js
@@ -15,7 +15,7 @@ export default () => (
         allowFullScreen
         caption="Click me"
         alt="Accessible image alt goes here"
-        url="https://source.unsplash.com/2000x1000/?darkbackground"
+        url="https://source.unsplash.com/iYPIx7VIh5g/2000x1000/"
       />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
@@ -26,7 +26,7 @@ export default () => (
         caption="Click me"
         alt="Accessible image alt goes here"
         fullScreenIconColor="dark"
-        url="https://source.unsplash.com/1000x2000/?lightbackground"
+        url="https://source.unsplash.com/5D2af8aFE5k/1000x2000"
       />
     </EuiFlexItem>
   </EuiFlexGroup>
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index b728943833f..ab9dd0d659c 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -22,6 +22,8 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
   flex-direction: column;
   padding: $euiCardSpacing;
   overflow: visible; /* 2 */
+  min-height: 1px; /* 3 */
+
 
   @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing);
 
diff --git a/src/components/card/card.js b/src/components/card/card.js
index 5c0dd5e1bcf..eb907e2856f 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { getSecureRelForTarget } from '../../services';
 
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
@@ -44,6 +45,8 @@ export const EuiCard = ({
   footer,
   onClick,
   href,
+  rel,
+  target,
   textAlign,
   isClickable,
   betaBadgeLabel,
@@ -64,6 +67,11 @@ export const EuiCard = ({
     className,
   );
 
+  let secureRel;
+  if (href) {
+    secureRel = getSecureRelForTarget(target, rel);
+  }
+
   let imageNode;
   if (image && layout === 'vertical') {
     imageNode = (
@@ -115,6 +123,8 @@ export const EuiCard = ({
       onClick={onClick}
       className={classes}
       href={href}
+      target={target}
+      rel={secureRel}
       {...rest}
     >
       {optionalBetaBadge}
@@ -165,6 +175,8 @@ EuiCard.propTypes = {
    */
   onClick: PropTypes.func,
   href: PropTypes.string,
+  target: PropTypes.string,
+  rel: PropTypes.string,
   textAlign: PropTypes.oneOf(ALIGNMENTS),
 
   /**
diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
index 5c18dba489e..4011c4ba70c 100644
--- a/src/components/flex/_flex_group.scss
+++ b/src/components/flex/_flex_group.scss
@@ -10,7 +10,7 @@
 
   .euiFlexItem {
     flex-grow: 1;
-    flex-basis: 0%; /* 1 */
+    flex-basis: 0%; /* 2 */
   }
 }
 
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index 7435246c697..e679ab48502 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -1,8 +1,14 @@
+/**
+ * 1. Fix for IE where the image correctly resizes in width but doesn't collapse it's height
+      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
+ */
+
 // Main <figure> that wraps images.
 .euiImage {
   display: inline-block;
   max-width: 100%;
   position: relative;
+  min-height: 1px; /* 1 */
 
   &.euiImage--hasShadow {
     .euiImage__img {
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
index 351fd9a985d..53a6a67e81d 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.js.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -36,58 +36,62 @@ exports[`renders EuiConfirmModal 1`] = `
       </svg>
     </button>
     <div
-      class="euiModalHeader"
+      class="euiModal__flex"
     >
       <div
-        class="euiModalHeader__title"
-        data-test-subj="confirmModalTitleText"
+        class="euiModalHeader"
       >
-        A confirmation modal
+        <div
+          class="euiModalHeader__title"
+          data-test-subj="confirmModalTitleText"
+        >
+          A confirmation modal
+        </div>
       </div>
-    </div>
-    <div
-      class="euiModalBody"
-    >
       <div
-        class="euiText"
-        data-test-subj="confirmModalBodyText"
+        class="euiModalBody"
       >
-        <p>
-          This is a confirmation modal example
-        </p>
+        <div
+          class="euiText"
+          data-test-subj="confirmModalBodyText"
+        >
+          <p>
+            This is a confirmation modal example
+          </p>
+        </div>
       </div>
-    </div>
-    <div
-      class="euiModalFooter"
-    >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
-        data-test-subj="confirmModalCancelButton"
-        type="button"
+      <div
+        class="euiModalFooter"
       >
-        <span
-          class="euiButtonEmpty__content"
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary"
+          data-test-subj="confirmModalCancelButton"
+          type="button"
         >
-          <span>
-            Cancel Button Text
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span>
+              Cancel Button Text
+            </span>
           </span>
-        </span>
-      </button>
-      <button
-        class="euiButton euiButton--primary euiButton--fill"
-        data-test-subj="confirmModalConfirmButton"
-        type="button"
-      >
-        <span
-          class="euiButton__content"
+        </button>
+        <button
+          class="euiButton euiButton--primary euiButton--fill"
+          data-test-subj="confirmModalConfirmButton"
+          type="button"
         >
           <span
-            class="euiButton__text"
+            class="euiButton__content"
           >
-            Confirm Button Text
+            <span
+              class="euiButton__text"
+            >
+              Confirm Button Text
+            </span>
           </span>
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/components/modal/__snapshots__/modal.test.js.snap b/src/components/modal/__snapshots__/modal.test.js.snap
index bc2ecd706ba..fb8405d6953 100644
--- a/src/components/modal/__snapshots__/modal.test.js.snap
+++ b/src/components/modal/__snapshots__/modal.test.js.snap
@@ -35,7 +35,11 @@ exports[`renders EuiModal 1`] = `
         />
       </svg>
     </button>
-    children
+    <div
+      class="euiModal__flex"
+    >
+      children
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 5d408714aa8..7c82bb9dae8 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -1,11 +1,14 @@
 $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // match shadow
 
+/**
+ * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
+ *    flex display. https://github.com/philipwalton/flexbugs#flexbug-3
+ */
+
 .euiModal {
   @include euiBottomShadowLarge;
+  display: flex; /* 1 */
 
-  display: flex;
-  flex-direction: column;
-  max-height: 75vh; // We overflow the modal body based off this
   position: relative;
   background-color: $euiColorEmptyShade;
   border: 1px solid $euiModalBorderColor;
@@ -14,6 +17,13 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
   z-index: $euiZModal;
   min-width: 50%;
   animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
+
+  .euiModal__flex { /* 1 */
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    max-height: 75vh; // We overflow the modal body based off this
+  }
 }
 
 .euiModal--confirmation {
@@ -88,7 +98,6 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
   .euiModal {
     position: fixed;
     width: calc(100vw + 2px);
-    max-height: 100vh;
     left: 0;
     right: 0;
     bottom: 0;
@@ -96,6 +105,10 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
     border-radius: 0;
     box-shadow: none;
     border: none;
+
+    .euiModal__flex { /* 1 */
+      max-height: 100vh;
+    }
   }
 
   .euiModalHeader {
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 2613dbe7242..9a76fab37fa 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -52,7 +52,9 @@ export class EuiModal extends Component {
             color="text"
             aria-label="Closes this modal window"
           />
-          {children}
+          <div className="euiModal__flex">
+            {children}
+          </div>
         </div>
       </FocusTrap>
     );
diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
index 10ab91659b8..f47696b3863 100644
--- a/src/global_styling/utility/_utility.scss
+++ b/src/global_styling/utility/_utility.scss
@@ -61,3 +61,14 @@
     @include  euiBreakpoint($size) { display: initial !important; }
   }
 }
+
+/**
+  * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
+  * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
+  * https://github.com/philipwalton/flexbugs/issues/104
+  */
+.euiIEFlexWrapFix {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}