Search code examples
htmlcssflexboxinternet-explorer-11

Incorrect image sizing in IE11 in flexbox

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:

ie11

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.

Solution

  • 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