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>