Обратный ряд Flexbox ломает выравнивание элементов в IE 11

Question

Это перо ведет себя по-разному в IE11 и Chrome: https://codepen.io/excelkobayashi/pen/EMgaOE

HTML:

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

Соответствующий CSS:

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

Ожидаемый результат и поведение Chrome:оба элемента выровнены по верху родительского элемента.IE11 результат: оба div выровнены по ДНУ родительского элемента.

По какой-то причине IE11 выравнивает элементы по дну, игнорируя тот факт, что обратный ряд должен поменять местами flex-start и flex-end для align-items.

Однако я не могу найти никакой документации, утверждающей, что IE должен отличаться здесь, и официальная документация IE11 говорит, что она должна соответствовать поведению Chrome: https://msdn.microsoft.com/en-us/ie/jj127298(v=vs.94)

Есть ли способ обойти это?

Answer 1

На данный момент, похоже, я буду работать над этим, используя хак для селектора IE11:

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

Answer 2

Вы говорите о row-reverse в вашем вопросе.

Но в вашем коде я вижу только wrap-reverse.

Я не вижу row-reverseв любом месте вашего кода.

row-reverse относится к flex-direction и, по-видимому, является тем, что вы пытаетесь сделать.

wrap-reverse относится к flex-wrap и применяется только к переносуповедение.

Answer 3

добавьте margin-top: 0px; для IE

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

, если вы хотите использовать его только для IE, а не для других браузеров, вы можете добавить стиль комментария в свой html

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