Вертикальное содержимое Flexbox выравнивается с переполнением в Internet Explorer

Question

Редактировать : Каждый, кто пытается найти решение для поведения флексбокса IE с переполнением, смотрит на этот поток переполнения стека .Кажется, это не будет исправлено.Я смог обойти эту проблему, см. Ответ ниже, но могут быть случаи (ответственный рост), когда вы не можете.

---

У меня проблема с IE11 (неожиданность), что яне знаю как починить.Дочерний объект, который переполняет свой родительский контейнер, должен быть центрирован по горизонтали и вертикали при переходе по размеру.Я пытаюсь сделать это с помощью flexbox, но все остальное, что работает, тоже подойдет.

При исследовании проблем выравнивания в flexbox IE я только что обнаружил ошибку, которая применяется при использовании 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>