Flex Container in IE 11 not aligning properly

Question

I have a problem with the following snippet: I need to make it work in Internet Explorer 11. In Chrome, Firefox and Edge it looks like it should.

There are 3 elements (red, yellow, green), beneeth each other. Another blue element with 50% of the height is on top of the others. This is how it should look like:

However Internet Explorer 11 puts the blue element on the right side beneeth the others and not on top of them. Can you guys help me with that problem?

This is how it looks in IE11 - it should not look like this

.wrapper {
    display: block;
    height: 50px;
}

.flex-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    margin: 2px 0;
}

.outer,
.inner {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.outer {
    height: 100%;
}

.inner {
    height: 30%;
    align-self: center;
    position: absolute;
}

.inner-element,
.outer-element {
    height: 100%;
    max-width: 100%;
    align-self: flex-start;
}

<div class="wrapper">
<div class="flex-wrapper">
    <div class="outer">
        <div class="outer-element" style="width: 10%; background-color: red"></div>
        <div class="outer-element" style="width: 50%; background-color: yellow"></div>
        <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
        <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
</div>
</div>

I *believe* it is also a possible duplicate of [Absolutely positioned flex item is not removed from the normal flow in IE11](https://stackoverflow.com/q/32991051/11683) — GSerg, Jun 22 '18 at 07:00

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

The problem

The issue is that you are positioning .inner absolutely but not giving it a specific position. This means that where the browser first renders it is where it will output on screen. It seems IE handles this differently to other browsers which is why you are getting the discrepancy.

The solution

The following modifications would be required:

Add left: 0; to .inner to align it to the left of .flex-wrapper
Add top: 50%; to .inner to move it down 50% of .flex-wrapper and transform: translateY(-50%); to move it back up by 50% of its height

.wrapper {
  display: block;
  height: 50px;
}

.flex-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  margin: 2px 0;
}

.outer,
.inner {
  width: 100%;
  max-width: 100%;
  display: flex;
}

.outer {
  height: 100%;
}

.inner {
  height: 30%;
  align-self: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.inner-element,
.outer-element {
  height: 100%;
  max-width: 100%;
  align-self: flex-start;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="outer">
      <div class="outer-element" style="width: 10%; background-color: red"></div>
      <div class="outer-element" style="width: 50%; background-color: yellow"></div>
      <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
      <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
  </div>
</div>

Thank you for the explanation of the issue and for the fix! It works perfectly! — Michael B, Jun 22 '18 at 07:03

score 1 · Answer 2 · answered Jun 22 '18 at 07:04

I would made some changes.

First:
- Position .inner
- Make it full height thanks to its position
- Make it display: flex

.inner {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    display: flex;
}

Second: - Give a height to .inner-element - Center it

.inner-element {
    height: 30%;
    align-self: center;
}

.wrapper {
    display: block;
    height: 50px;
}

.flex-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    margin: 2px 0;
}

.outer,
.inner {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.outer {
    height: 100%;
}

.inner {
    /*height: 30%; No need for that anymore */
    /*align-self: center; No need for that anymore */
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; /* Now it's in the right position */
    display: flex; /* To be able to align the inner-element */
}

.inner-element,
.outer-element {
    height: 100%;
    max-width: 100%;
    align-self: flex-start;
}

.inner-element {
    height: 30%; /* Make it the right height */
    align-self: center; /* Center it */
}

<div class="wrapper">
<div class="flex-wrapper">
    <div class="outer">
        <div class="outer-element" style="width: 10%; background-color: red"></div>
        <div class="outer-element" style="width: 50%; background-color: yellow"></div>
        <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
        <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
</div>
</div>

Flex Container in IE 11 not aligning properly

2 Answers2

The problem

The solution