diff --git a/docs/pages/card.md b/docs/pages/card.md
index 424e1a4747..877b318376 100644
--- a/docs/pages/card.md
+++ b/docs/pages/card.md
@@ -36,6 +36,20 @@ A card container has no padding, allowing you to place full-bleed images inside.
 </div>
 ```
 
+<div class="alert callout">
+  <p><strong>Browser Bug (IE 11 - Flexbug): </strong>On IE 11, when using the card with image, you may see a lot of whitespace under each image that happens to match the original image size. The bug can be reproduced <a href="https://codepen.io/IamManchanda/pen/MmNqEX?editors=1100">here</a> on an IE11 browser. Use <code>.card-image</code> class to wrap your image to resolve this.</p>
+</div>
+
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/aWrWQq?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html
+<div class="card-image">
+  <img src="assets/img/generic/rectangle-1.jpg">
+</div>
+```
+
 ---
 
 ### Card Divider
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 58f87cfff3..d3ba77e500 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -120,4 +120,10 @@ $card-margin-bottom: $global-margin !default;
   .card-section {
     @include card-section;
   }
+
+  // For IE 11 - Flexbug
+  // https://github.com/philipwalton/flexbugs/issues/75
+  .card-image {
+    min-height: 1px;
+  }
 }