Flexbox row-reverse breaks align-items on IE 11

Question

This pen behaves differently between IE11 and Chrome: https://codepen.io/excelkobayashi/pen/EMgaOE

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

Relevant CSS:

.container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
}

Expected result and Chrome behavior: both divs are aligned to the TOP of the parent. IE11 result: both divs are aligned to the BOTTOM of the parent.

For some reason, IE11 is aligning the items to the bottom, ignoring the fact that row-reverse should swap the position of flex-start and flex-end for align-items.

However, I can't find any documentation stating that IE should be different here, and the IE11 official documentation says that it should match the Chrome behavior: https://msdn.microsoft.com/en-us/ie/jj127298(v=vs.94)

Is there any way to work around this?

You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to include the same code you have in the CodePen, in a runnable snippet here on SO so people don't have to go to a different site. — Heretic Monkey, Mar 04 '19 at 16:46
Flexbox has [partial IE support](https://caniuse.com/#search=flex-wrap), unfortunately. ["Flex property not working in ie](https://stackoverflow.com/questions/32239549/flex-property-not-working-in-ie) — Bodrov, Mar 04 '19 at 16:52

score 0 · Answer 1 · answered Mar 04 '19 at 16:51

0

add margin-top: 0px; for IE

.left, .right
{
    margin: 5px;
    width: 200px;
    height: 200px;
    margin-top: 0px;
}

if you want it only for IE and not other browsers you can add comment style to your html

    <!--[if IE]>
    <style>
    .left, .right
    {
       margin-top: 0px !important;
    }
    </style>
    <![endif]-->
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

answered Mar 04 '19 at 16:51

pavelbere

964
10
21

margin-top doesn't seem to do anything here; also, I do still want the wrapping to work. I can't use IE specific style tags due to the web framework I'm working with, it would have to be something inside of the CSS. – Excel Kobayashi Mar 04 '19 at 17:00

score 0 · Answer 2 · answered Mar 04 '19 at 17:09

0

For now, it looks like I'll be working around this by using an IE11 CSS-specific selector hack:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
    .container
    {
        align-items: flex-start;
    }
}

answered Mar 04 '19 at 17:09

Excel Kobayashi

578
1
6
19

If above work around solved your issue than I suggest you to mark it as an accepted answer after 24 hrs, When it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding. – Deepak-MSFT Mar 05 '19 at 06:25

score 0 · Answer 3 · answered Mar 05 '19 at 00:33

You're talking about row-reverse throughout your question.

But in your code, the only thing I see is wrap-reverse.

I don't see row-reverse anywhere in your code.

row-reverse applies to flex-direction and appears to be what you're trying to do.

wrap-reverse applies to flex-wrap and applies only to wrapping behavior.

Flexbox row-reverse breaks align-items on IE 11

3 Answers3