IE11 flexbox issue: bootstrap 4 card height is maximum of child card-body "img-fluid"

Question

I am working on a template in bootstrap 4.0.0 that I will use for multiple gallery pages containing many (50+) mixed ratio images. I have a grid layout that works well except for IE11. My images are inside cards that are inside buttons and the card heights seem to be stretching to the maximum height of the responsive images.

• I need help determining if there is a way to make the boxes shrink in height as well as width in IE 11. (width part is working)
• I want to keep what I have : Cols equal height, images centered inside with the text at the bottom, not mashed up against the bottom of the image.
• I would be happy (for IE only) with the results I get if I uncheck display:flex in IE's DOM explorer under the "card" class. It reduced the size of the card but I lose vertical centering. So not a good overall solution.

I autoprefixed, and played with the options on this flexbox bug page and was not sucessful.

I have tried to include the code in the snippet but it isn't working so I am just going to provide this link to a bootply:

Screen shot of problem with IE11 showing the column heights are way too tall: Link

Image showing how the grid looks in other browsers Link

Everything works in every modern browser, screen size, and device except IE11 which accounts for 10% of visitors. (I am not worried about anything older that does not support bootstrap 4.0 like ie9 or safari 8)

Answer 1

This works in IE 10 and 11 Card Height Issue: Fixed

* {
   min-height: 0.01px;
}