Flexbox 垂直内容与 Internet Explorer 中的溢出对齐

Question

编辑：来到这里试图找到解决 IE 的 flexbox 溢出行为的解决方案的每个人都可以查看 this stackoverflow thread。似乎这不会被修复。我能够解决此问题，请参阅下面的答案，但可能存在无法解决的情况（响应高度）。

---

我遇到了 IE11 问题（很意外），我不知道如何解决。 溢出其父容器的子容器在大小转换时应水平和垂直居中。我正在尝试使用 flexbox 来实现，但其他任何可行的方法都可以。

在研究 IE flexbox 对齐问题时，我发现了一个适用于使用 min-height 的错误，解决方法在这种情况下没有帮助。

以下是该问题的简化示例。在 IE 中观看，您会看到形状从顶部而不是中心开始动画。其他所有浏览器都会保持形状居中。​​

这是一个可以玩弄的小提琴：jsfiddle

任何想法将不胜感激:)

.container {
  background-color: grey;
  height: 150px;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.child {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  flex: 1 0 auto;
  align-self: center;
  font-size: 5em;
  animation: changesize 3s infinite;
  
}

svg {
  width: 100%;
  height: 100%;
}

.st0{fill:#00748A;}
.st1{fill:#D3D938;}

@keyframes changesize {
  0% { width: 100%; height: 100%; }
  50% { width: 500%; height: 500%; }
  100% { width: 100%; height: 100%; }
}

<div class="container">
  <div class="child">
      <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
    </svg>
  </div>
</div>

Answer 1

因为.container 有一个固定的高度，我们可以使用绝对定位来居中.child。

.container {
  background-color: grey;
  height: 150px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.child {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  left: -200%;
  right: -200%;
  top: -200%;
  bottom: -200%;
  margin: auto;
  position: absolute;
  font-size: 5em;
  animation: changesize 3s infinite;
}

svg {
  width: 100%;
  height: 100%;
}

.st0 {
  fill: #00748A;
}

.st1 {
  fill: #D3D938;
}

@keyframes changesize {
  0% {
    width: 100%;
    height: 100%;
  }
  50% {
    width: 500%;
    height: 500%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

<div class="container">
  <div class="child">
    <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
        </svg>
  </div>
</div>