Flex 图像未在 IE 11 中显示答案

【问题标题】：Flex image not displaying in IE 11Flex 图像未在 IE 11 中显示
【发布时间】：2019-08-17 14:59:38
【问题描述】：

使用此代码，我可以在 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>

【问题讨论】：

不确定如何标记为重复，但我相信这是这个问题的重复：stackoverflow.com/questions/21600345/… - 至少似乎有答案。
@kilkfoe 谢谢，用 flex-grow 替换 flex 解决了这个问题。

标签： html css flexbox bootstrap-4

【解决方案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>

【讨论】：