Merge pull request #10082 from IamManchanda/bug/browser/IE11-card-image

Closes #10079 - Fix a flexbug for cards on IE11

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

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;
+  }
 }