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

Question

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

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

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

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

这里有一个 fiddle 可以玩：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>

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

Flexbox vertical content align with overflow in Internet Explorer

css

flexbox

internet-explorer-11