Как я могу изменить проблему для flex-flow на ie11?

Question

Я хочу расположить элемент li по горизонтали, и при превышении длины следующий элемент помещается в верхнюю строку.

Родительский блок Div имеет "position: fixed;"опция.

Chrome, Edge в порядке.Но IE11 нет.

Если у вас есть совет для этой проблемы.Пожалуйста, расскажите мне о.

                    ul {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-flow: row wrap-reverse;

                    li {
                        display: inline-block;
                        width: 200px;
                        height: 30px;
                        font-size: 20px;

                        span {
                            font-size: 28px;
                        }
                    }

            <ul>
                <li id="conErr1"><span>1</span>번 수신기 통신장애</li>
                <li id="conErr2"><span>2</span>번 수신기 통신장애</li>
                <li id="conErr3"><span>3</span>번 수신기 통신장애</li>
                <li id="conErr4"><span>4</span>번 수신기 통신장애</li>
                <li id="conErr5"><span>5</span>번 수신기 통신장애</li>
                <li id="conErr6"><span>6</span>번 수신기 통신장애</li>
                <li id="conErr7"><span>7</span>번 수신기 통신장애</li>
                <li id="conErr8"><span>8</span>번 수신기 통신장애</li>
                <li id="conErr9"><span>9</span>번 수신기 통신장애</li>
                <li id="conErr10"><span>10</span>번 수신기 통신장애</li>
            </ul>

Answer 1

Я понял, что вы можете просто добавить атрибут width в родительский div, и тогда он будет работать в IE.Вот мой тестовый код.CSS.

<style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-flow: row wrap-reverse;
    }

    li {
        display: inline-block;
        width: 200px;
        height: 30px;
        font-size: 20px;
    }

    span {
        font-size: 28px;
    }

</style>

HTML.

 <div style="position:fixed;bottom:0;left:0;width: 100%;">
    <ul>
        <li id="conErr1"><span>1</span>번 수신기 통신장애</li>
        <li id="conErr2"><span>2</span>번 수신기 통신장애</li>
        <li id="conErr3"><span>3</span>번 수신기 통신장애</li>
        <li id="conErr4"><span>4</span>번 수신기 통신장애</li>
        <li id="conErr5"><span>5</span>번 수신기 통신장애</li>
        <li id="conErr6"><span>6</span>번 수신기 통신장애</li>
        <li id="conErr7"><span>7</span>번 수신기 통신장애</li>
        <li id="conErr8"><span>8</span>번 수신기 통신장애</li>
        <li id="conErr9"><span>9</span>번 수신기 통신장애</li>
        <li id="conErr10"><span>10</span>번 수신기 통신장애</li>
    </ul>
</div>