Closes #10079 - Fix a flexbug for cards on IE11

Changes
- Fix browser specific bug
- Update docs!

diff --git a/docs/pages/card.md b/docs/pages/card.md
index 424e1a4747d7ac628089cd23f7aa7f28167a216d..8f51e57eea06d26bed0f3bd2e36ebc42cacae1a1 100644 (file)
--- 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 equalizer, there is an extra added space under each image that happens to match the original image size. The bug can be reproduced <a href="https://codepen.io/IamManchanda/pen/MmRqvN?editors=1100">here</a> on an IE11 browser. Use <code>.card-image</code> class as a parent class to an <strong>image</strong> 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 58f87cfff3cd21b1bd10b8a7d78bad0d95a63f62..d3ba77e500d82719184baa625212b5f6fb201fb5 100644 (file)
--- 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;
+  }
 }