Flexbox vertical content align with overflow in Internet Explorer

Question

Edit: Everybody getting here trying to find a solution for IE's flexbox behavior with overflow have a look at this stackoverflow thread. Seems this is not going to be fixed. I was able to work around the issue, see answer below, but there might be cases (responsive height) where you can't.

I've got a problem with IE11 (surprise) that I don't know how to fix. A child that overflows it's parent container should be centered horizontally and vertically when transitioned in size. I'm trying to do it with flexbox, but anything else that works would be fine as well.

When researching for IE flexbox alignment issues I just found a bug that applies when using min-height, the workarounds didn't help in this case.

Below is a simplified example of the problem. Watch in IE and you'll see the shape is starting it's animation from the top instead of the center. Every other browser will keep the shape centered.

Here's a fiddle to play around with: jsfiddle

Any idea would be appreciated :)

.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>

closely related: https://stackoverflow.com/a/55102019/8620333 — Temani Afif, May 07 '19 at 20:04
You could try it with animating the margins of the .child from positive into negative values. — Esger, May 07 '19 at 20:05

score 1 · Accepted Answer · answered May 08 '19 at 01:36

Because .container has a fixed height we can use absolute positioning to center .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>

I was sure I had tried this out. Seems I haven't. Thanks a lot! — user127091, May 08 '19 at 13:03

Flexbox vertical content align with overflow in Internet Explorer

1 Answers1