Question

编辑：来到这里的每个尝试为IE的flexbox行为溢出找到解决方案的人都来看看this stackoverflow thread。似乎这不会得到解决。我可以解决此问题，请参见下面的答案，但是可能有些情况（负责任的身高）是您无法做到的。

我遇到了IE11（意外）问题，我不知道如何解决。大小可变时，溢出其父容器的子项应水平和垂直居中。我正在尝试使用flexbox进行此操作，但其他可行的方法也都可以。

在研究IE Flexbox对齐问题时，我刚刚发现了一个在使用最小高度时适用的错误，这种情况下的解决方法无济于事。

下面是问题的简化示例。在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>

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

1 个答案: