CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
Michael B
Michael B

Reputation: 1719

Flex Container in IE 11 not aligning properly

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: 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 This is how it NOT should look like

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

Upvotes: 4

Views: 2163

Answers (2)

Amaury Hanser
Amaury Hanser

Reputation: 3456

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>

Upvotes: 1

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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>

Upvotes: 4

Related Questions