Incorrect image sizing in IE11 in flexbox

Question

I am trying to position an image in a div. It should be centered. The div should have a minimum width and it should grow only if text below the image requires it.

The following code demonstrates what I want in Chrome:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: aliceblue;
}

.loading-spinner-overlay-1 {
    left: 0;
    top: 0;
    right: 0;
    bottom: calc(100% - 300px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-overlay-2 {
    left: 0;
    top: 300px;
    right: 0;
    bottom: calc(100% - 600px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-background {
    min-width: 100px;
    min-height: 100px;
    max-width: 50%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 1;
    padding: 20px;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.loading-spinner-container > img {
    margin: auto;
}

.loading-spinner-container > p {
    text-align: center;
    margin: 0;
}

<img src="http://placehold.it/40x40">
<div class="loading-spinner-overlay-1">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
    </div>
  </div>
</div>

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
      <p>
      Some long text
      </p>
    </div>
  </div>
</div>

However, in IE11, it looks like this:

Am I doing something wrong? Or is this a bug in IE11?

What can I do to fix this?

I have tried setting max-width: 100% and flex-shrink:0 on the img tag as some google results suggest, but this didn't help.

Are you adding the proper vendor prefixes, or using a tool like Autoprefixer to do it automatically? https://autoprefixer.github.io — Ted Whitehead, Sep 25 '17 at 16:55
@TedWhitehead: No, I haven't, but as far as I can tell, no such prefixes are necessary. I have created a fiddle with the CSS from Autoprefixer and it suffers from the same problem: https://jsfiddle.net/DHilgarth/hterd97n/ — Daniel Hilgarth, Sep 25 '17 at 17:00
I think it’s an issue with placehold.it, IE can’t determine the intrinsic size of the image. It seems to work fine with http://satyr.io/40x40 instead, or if you add an inline `width` attribute to the img tag. — Ted Whitehead, Sep 25 '17 at 17:07
@TedWhitehead: Well, I have built this example based on my real app. In my app, I am using a gif, not an image from placehold.it... Also, there is no difference when using your placeholder. It's the exact same problem. — Daniel Hilgarth, Sep 25 '17 at 17:09
@TedWhitehead: Explicitly setting the width and height of the img tag to the size of the image in pixels will fix the problem, right. But that is not a real solution as the image might be replaced by another with a different size. — Daniel Hilgarth, Sep 25 '17 at 17:10
Yeah, my bad, my fiddle hadn’t updated (lag time in Browserstack). I think you will need to add the inline `width` attribute. You could also check out https://github.com/philipwalton/flexbugs for known issues. — Ted Whitehead, Sep 25 '17 at 17:11
Gotcha. Do you need to use flexbox on `.loading-spinner-container`? If not, you could do something like this? https://jsfiddle.net/bf3zqoj9/ — Ted Whitehead, Sep 25 '17 at 17:17
@TedWhitehead The issue with that approach is that the image is not centered if there is no text... :/ — Daniel Hilgarth, Sep 25 '17 at 17:20
You mean vertically? What if we move the margin to the `
` instead of the ``? https://jsfiddle.net/r1f3wptt/ — Ted Whitehead, Sep 25 '17 at 17:36
Yes, vertically. In your latest example, the white background no longer is square... — Daniel Hilgarth, Sep 25 '17 at 17:37
It looks like this in Chrome: https://www.screencast.com/t/7GIf9tG9WHm5 — Daniel Hilgarth, Sep 25 '17 at 17:41

Asons · Accepted Answer · 2017-09-27T10:01:32.270

Updated

Adding align-items: flex-start to the loading-spinner-container fixes the issue, which kind of make sense, since align-items default is stretch and works cross axis (in this case horizontal) for flex column direction.

Updated, 2nd revision

Additionally, to fix the vertical centering, and since IE11 again has some issues when it comes to min-height, remove flex-direction: column from the loading-spinner-background and move min-height: 100px to loading-spinner-container.

Stack snippet

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: aliceblue;
}

.loading-spinner-overlay-1 {
    left: 0;
    top: 0;
    right: 0;
    bottom: calc(100% - 300px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-overlay-2 {
    left: 0;
    top: 300px;
    right: 0;
    bottom: calc(100% - 600px);
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-background {
    min-width: 100px;
    max-width: 50%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    /* flex-direction: column;                  removed  */
    z-index: 1;
    padding: 20px;
}

.loading-spinner-container {
    min-height: 60px;                       /*  added/value changed (moved from *-background class)  */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;                /*  added  */
}

.loading-spinner-container > img {
    margin: auto;
}

.loading-spinner-container > p {
    text-align: center;
    margin: 0;
}

<img src="http://placehold.it/40x40">
<div class="loading-spinner-overlay-1">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
    </div>
  </div>
</div>

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <img src="http://placehold.it/40x40">
      <p>
      Some long text
      </p>
    </div>
  </div>
</div>

Also align-items: center can be used, and if combined with justify-content: center, you can drop the margin: auto on the img.

Fiddle demo

Updated, 3rd revision, based on a comment

Longer text appears to not wrap on IE.

As shown in this post, IE need to have the width set explicit on the flex item, here p, and since also loading-spinner-container is a flex column item (for row item flex-grow is enough), it needs one too (or overflow: hidden).

Fiddle demo

There still is a problem. If the text is very long, it doesn't wrap around in IE11: https://jsfiddle.net/4mj99ur2/1/. Setting `width:100%` on the container and on the `p` solves this. — Daniel Hilgarth, Sep 27 '17 at 09:27

kheya · Answer 2 · 2017-09-25T18:09:27.090

0

Try this:

<div class="loading-spinner-overlay-2">
  <div class="loading-spinner-background">
    <div class="loading-spinner-container">
      <div class="img-container">  <!-- added this -->
        <img src="http://placehold.it/40x40">
        <p>
            Some long textwrwerwer
        </p>
      </div>
    </div>
  </div>
</div>

Then added new class:

.loading-spinner-container .img-container {
  clear:both;
  text-align:center;
}

Basically I added a wrapping div.

Hope it helps.

edited Sep 25 '17 at 18:09

answered Sep 25 '17 at 17:45

kheya

7,546
20
77
109

I want to avoid hardcoding the image size. I know that this is a solution. – Daniel Hilgarth Sep 25 '17 at 17:46
That still doesn't produce the desired result – Daniel Hilgarth Sep 26 '17 at 11:04

Incorrect image sizing in IE11 in flexbox

2 Answers2