Flex (Materialize valign-wrapper) does not work in IE

Question

So I have got a materialize collection with some customisation.

<ul class="collection">
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">build</i>
        <span class="title">A</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">comment</i>
    <span class="title">B</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">description</i>
    <span class="title">C</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">content_copy</i>
    <span class="title">D</span>
</li>

I use the valign-wrapper to vertically align the span and the i. And the valign-wrapper use flex.

These code does not work in IE.

My current workaaruond is to add

li span{
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}

Is there a better way to make it cross-browser workable? Ideal pertain valign-wrapper and do not add too many intrusive code.

Example

Answer 1

So the answer to the question here has to begin with the fact that the problem isn't actually IE, but Outlook, which the OP was assuming is using the IE rendering engine.

In fact, it doesn't. Outlook uses the MS Word rendering engine for HTML emails, which is a completely different beast to IE, and has a whole slew of 'gotchas' for anyone trying to develop an HTML email (especially as most HTML emails need to be displayed correctly in a bunch of other email clients as well, which generally do work better)

I think it's pretty safe to say that CSS Flex is going to be unsupported, but the problems go a lot deeper than that. This article goes into some of the more common problems you'll find with developing HTML emails for Outlook. It's pretty bad. And here's another, older article that may help.

I hope that helps, although I suspect it may instead leave you feeling a bit helpless. Microsoft has moved on a long way since the days of IE6, but Outlook's HTML rendering is still stuck in the dark old days. (As is MS Word's, of course... but nobody uses that for generating HTML... do they? Do they??? Really??!!)