Having an issue with this code snippet: It works in Chrome, Firefox, and Edge but not in Internet Explorer 11.
There are 3 elements (red, yellow, green) stacked vertically, with a blue element overlaying them taking up 50% of the height. Expected result: https://i.sstatic.net/pn09u.png
However, in Internet Explorer 11, the blue element is positioned on the right side below the other elements instead of on top. Any suggestions on how to fix this?
Actual result in IE11 - should not look like this https://i.sstatic.net/Duodx.png
.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>