html - IE11 中 flexbox 中的图像大小不正确

Question

我正在尝试在 div 中定位图像。它应该居中。 div 应该有一个最小宽度，并且只有在图像下方的文本需要时它才应该增长。

以下代码演示了我在 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>

然而，在 IE11 中，它看起来像这样:

我做错了什么吗？或者这是 IE11 中的错误？

我该怎么做才能解决这个问题？

我已经尝试在 img 标签上设置 max-width: 100% 和 flex-shrink:0 一些谷歌结果表明，但这没有帮助。

Answer 1

已更新

将 align-items: flex-start 添加到 loading-spinner-container 解决了这个问题，这是有道理的，因为 align-items 默认为 stretch 并且在 flex 列方向上使用交叉轴(在本例中为水平)。

已更新，第二次修订

此外，为了修复垂直居中，并且由于 IE11 在 min-height 方面再次出现一些问题，请从 中删除 flex-direction: column >loading-spinner-background 并将 min-height: 100px 移动到 loading-spinner-container。

堆栈片段

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>

---

也可以使用align-items: center，如果结合justify-content: center，可以去掉margin: auto 在 img 上。

Fiddle demo

---

已更新，第 3 次修订，基于评论

较长的文本在 IE 上似乎不会换行。

如图this post , IE 需要在 flex 元素上明确设置宽度，这里是 p，因为 loading-spinner-container 也是一个 flex column item(对于 row item flex-grow 就足够了)，它也需要一个(或 overflow: hidden)。

Fiddle demo