Flex image not displaying in IE 11

Question

With this code I am able to display a row like this in firefox and chrome.

In IE 11 it displays like this, and as you can see the image is not visible.

For some reason it seems to have no width in the inspector. How can I get it to work like it does in chrome and firefox? Thanks.

Code:

<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>

Not sure how to mark as duplicate, but I believe this is a duplicate of this question: https://stackoverflow.com/questions/21600345/flexbox-and-internet-explorer-11-displayflex-in-html - seems to have the answer at least. — kilkfoe, Mar 27 '19 at 05:49
@kilkfoe Thanks, replacing flex with flex-grow fixed this issue. — jjacobson, Mar 27 '19 at 05:57

score 2 · Accepted Answer · edited Mar 27 '19 at 06:09

Replacing flex with flex-grow fixed this issue on 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>

Flex image not displaying in IE 11

1 Answers1