Изображение Flex не отображается в IE 11

Question

С помощью этого кода я могу отображать строку, подобную этой, в Firefox и Chrome.

В IE 11 это выглядит так, иКак вы можете видеть, изображение не видно.

По какой-то причине в инспекторе, похоже, нет ширины.Как мне заставить его работать так же, как в Chrome и Firefox?Спасибо.

Код:

<div class="carousel-item active h-100 bg-dark text-light">
    <div class="d-flex align-items-center">
        <div class="text-center" style="flex:1;">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
        <img src="{{ url_for('static', filename='img/placeimg_320_400_animals.jpg') }}" class="d-block h-100"
            alt="..." style="flex:0;">
    </div>
</div>

Answer 1

Замена flex на flex-grow исправила эту проблему в IE 11.

<div class="carousel-item active h-100 bg-dark text-light">
    <div class="d-flex align-items-center">
        <div class="text-center" style="flex-grow:1;">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
        <img src="{{ url_for('static', filename='img/placeimg_320_400_animals.jpg') }}"
            class="d-block h-100" alt="..." style="flex-grow:0;">
    </div>
</div>