Элемент Flex не принимает высоту дочернего изображения в IE 11

Question

Я пытаюсь это:

html,body{
    background-color: black;
    margin: 0;
    padding: 0;
}

.wp {
    margin: 20px auto;
    width: 300px;
}

.a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 2px solid red;
}

.ai {
    width: 100%;
}

.im {
    outline: 2px solid yellow;
}

<div class="wp">
    <div class="a">

        <div class="ai">
            <img class="im" width="100%" src="https://www.nasaspaceflight.com/wp-content/uploads/2018/10/2018-10-22-13_27_15-Window.jpg">
        </div>
    </div>
</div>

И я получаю разные результаты в EDGE против IE 11:

На изображении левый край, а правый IE11.

Я пытался содержать img в div, как предложено Flexbugs , но я получил те же результаты.

Есть идеи как исправить версию IE11?

Answer 1

Проблема с IE11, в этом случае, по-видимому, заключается в том, что гибкий элемент (.ai) принимает внутреннюю высоту изображения (877px) во время процесса рендеринга, а затем перестает отвечать.

Команда width: 100%, которая масштабирует изображение меньше, похоже, приходит после того, как размер гибкого элемента, но IE11 уже сделан.

Я бы использовал flex-direction: row, чтобы обойти проблему.

Кроме того, чтобы убрать этот небольшой пробел под изображением, см. Этот пост: Загадочное пустое пространство под тегом изображения

Answer 2

Проблемы с Flex в IE - это общая проблема, более того, display: flex; не является широко распространенным свойством. Попробуйте следующие варианты:

.a { flex: 1; }

или родитель.

.wp { width: 100%; } // or 80%

Это должно решить проблему.

---

Если вы хотите сохранить .wp 300px, попробуйте следующее. Добавьте дополнительного родителя для .wp, установите для него значение 300px и установите для .wp значение 100%:

HTML

<div class="wp-parent">
    <div class="wp">
        <div class="a">
            <div class="ai">
                <img class="im" width="100%" src="/2018-10-22-13_27_15-Window.jpg">
            </div>
        </div>
    </div>
</div>

CSS

.wp-parent { 
    width: 300px; 
}

.wp { 
    width: 100%; 
}