Incorrect image sizing in IE11 in flexbox - html

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.

Answer 1

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

Answer 2

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.