md-card height doesn't adjust properly to respect scaled-down image size in IE

[sstorie]

Please forgive me if I'm misunderstanding the root cause of this, but I'm trying to create a "masonry layout" where I've got multiple columns of images that are different dimensions. I'm trying to use cards to hold each image, and in Chrome and Firefox it works exactly as I expect. The card scale to the window (using flex) and the images scale the match the size of the cards.

However, on IE 11 the height of the cards seems to stay with the actual height of the image, even if it's being scaled down to a smaller size. I've created a Codepen that demonstrates the problem:

http://codepen.io/sstorie/pen/myJWxQ

You can see in IE that the images that are orientated horizontally scale their height down to fit the width of the card, but the height of the card doesn't scale down with it. It remains that the height of the image.

Is this a bug in md-card, or do I just have to add some IE-appropriate CSS? If it's an IE thing, any guidance on what should be added to make this flow properly?

[sstorie]

If it helps at all I asked this same question on stackoverflow, but over there I have the images attached that visually show what I'm trying to solve. Here's how this example looks in Chrome and Firefox:

...but here's how it looks in IE11:

[Splaktar]

I've updated the Codepen to 0.8.3: http://codepen.io/Splaktar/pen/Kwxmxa
I will test with IE 11 when I am able to get to a Windows machine. But there are certainly some flexbox issues in IE 11 that still need to be worked out. Some may be fixable with -ms prefixes.

[Splaktar]

This seems to be fixed or at least doing a lot better now. See the image attached here from IE 11 with the updated codepen. It looks like the images are stretched to fit the card.

[ThomasBurleson]

Fixed.

[Frank3K]

Unfortunately I don't think this is fixed. Screenshot of the current demo-site (using master) in Internet Explorer 11.

[Frank3K]

@ThomasBurleson: This issue still exists in Internet Explorer 11. Can you re-open this issue or should I create a new one?

[silberjan]

issue still exists for me (1.0.4 @ chrome 48)
surprisingly, in ms edge it works

[silberjan]

OK, I tested a little bit.

It is working in:

• Firefox 44
• Edge 25
• Vivaldi

Not working in:

• Chrome 48
• Opera 34

Everything on Windows
In Chrome for Mac it's working.

[Noppey]

+1, microsoft edge adjusts image height to scale with max width, chrome keeps height at natural height.

[ThomasBurleson]

Please see #6981