Flex item not taking height of image child in IE 11

Question

I'm trying this:

html,body{
    background-color: black;
    margin: 0;
    padding: 0;
}

.wp {
    margin: 20px auto;
    width: 300px;
}

.a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 2px solid red;
}

.ai {
    width: 100%;
}

.im {
    outline: 2px solid yellow;
}

<div class="wp">
    <div class="a">

        <div class="ai">
            <img class="im" width="100%" src="https://www.nasaspaceflight.com/wp-content/uploads/2018/10/2018-10-22-13_27_15-Window.jpg">
        </div>
    </div>
</div>

And I get different results in EDGE vs IE 11:

In the image the left one is EDGE and the right one is IE11.

I've tried containing the img in a div as suggested by Flexbugs but I got the same results.

Any ideas how to fix the IE11 version?

score 2 · Accepted Answer · answered Mar 13 '19 at 01:09

2

The problem with IE11, in this case, appears to be that the flex item (.ai) takes the intrinsic height of the image (877px) during the rendering process, and then stops responding.

The width: 100% command, which scales the image smaller, seems to come after the flex item is sized, but IE11 is already done.

I would use flex-direction: row to get around the problem.

Also, to remove that small gap under the image, see this post: Mystery white space underneath image tag

answered Mar 13 '19 at 01:09

Michael Benjamin

346,931
104
581
701

yeah I guess there is no way I'll be able to actually use the flex column, so what I did was I replaced the image with a div with a background, and then I just used the ratio of the original image to set the correct percentages for the width and height. It only happens with the `img` tag as it has that **intrinsic ratio** as you mentioned. IE11 is indeed dead, and I am thinking of making a special page suggesting to the users that they should upgrade their browsers... it is time for the explorer to perish out of existence. – andreihondrari Mar 14 '19 at 15:38
You could always crop the actual image to the dimensions you want, and load that into the HTML. – Michael Benjamin Mar 14 '19 at 16:36
If you choose the *"upgrade your browser"* path, see my question here: https://stackoverflow.com/q/33359157/3597276 – Michael Benjamin Mar 14 '19 at 16:37
1

And instead of making a special page, you could save time by just re-directing them here: http://browsehappy.com/ – Michael Benjamin Mar 14 '19 at 16:38

Demian · Answer 2 · 2019-03-11T21:39:44.943

-1

Flex problems in IE is a common problem, moreover, display: flex; is not a widely covered property. Try the following options:

.a { flex: 1; }

or the parent.

.wp { width: 100%; } // or 80%

This should resolve the problem.

If you want to keep the .wp 300px, try the following. Add an extra parent for .wp and set it to 300px and set the .wp to 100%:

HTML

<div class="wp-parent">
    <div class="wp">
        <div class="a">
            <div class="ai">
                <img class="im" width="100%" src="/2018-10-22-13_27_15-Window.jpg">
            </div>
        </div>
    </div>
</div>

CSS

.wp-parent { 
    width: 300px; 
}

.wp { 
    width: 100%; 
}

edited Mar 11 '19 at 21:39

answered Mar 11 '19 at 20:12

Demian

536
5
26

You usually use `flex` for a flex child, not the flexbox container itself. – andreihondrari Mar 11 '19 at 20:23
Try to add the `width: 100%` to the `wp` container or the `body` and let me know. – Demian Mar 11 '19 at 20:26
ok it scales to that, but what if I need the wp to be 300px ? – andreihondrari Mar 11 '19 at 20:28
I am afraid that's the limitation with flex for IE. You would have to change it into `display: inline-block` or `display: run-in;` Or you could add an extra parent to `.wp` and make that 300px and set for `.wp` 100% width. – Demian Mar 11 '19 at 20:34

Flex item not taking height of image child in IE 11

2 Answers2