CODEWITHSUNDEEP
htmlcssflexboxbootstrap-4
jjacobson
jjacobson

Reputation: 402

Flex image not displaying in IE 11

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

enter image description here

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

enter image description here

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>

Upvotes: 1

Views: 109

Answers (1)

jjacobson
jjacobson

Reputation: 402

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>

Upvotes: 2

Related Questions