Material: md-card - problems in Internet Explorer

[slichte]

I'm experiencing problems with md-cards in Internet Explorer 11. The attached screenshot shows angular-materials's demo site, however, I'm having the same issue with my project.

The md-card-title-element seems to have a height of 0. Is there any known workaround for this problem?

Thanks guys.

[Wardormeur]

flex="initial" is your friend
http://codepen.io/anon/pen/XXbLmw

[slichte]

Thank you very much! Works like a charm.

[Frank3K]

+1

[wbgbg]

I met the same problem in my electron app(chrome 47.0.2526.73).And flex="initial" works for me.Thanks!

[Cakez0r]

I have this problem in Chrome too (opened a stack overflow question about it at https://stackoverflow.com/questions/35028680/angular-material-simple-card-title-not-sizing-correctly-in-chrome)

flex="initial" fixed the issue for me too. Is this actually a bug, or a misunderstanding on my part about how flexbox works?

[ThomasBurleson]

IE has minimal support for flexbox. We are working to improve the Layout API and account for such issues. Meanwhile _manual_ fixes like ^^ are important.

[Cakez0r]

@ThomasBurleson Sorry for not being clear: I am seeing this issue in Chrome, not Internet Explorer.

EDIT:

    <md-card>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Icon action buttons</span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <p>The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...</p>
        </md-card-content>
    </md-card>

Looks like this in chrome:

[stephengardner]

if you're having this issue on Chrome, too:

md-card-title {
  flex: initial!important;
}