Absolutely Positioned Flex Item Is Not Removed from the Normal Flow in Ie11

Absolutely positioned flex item is not removed from the normal flow in IE11

It is happening because justify-content: space-between; Distribute items evenly The first item at the start, the last at the end. So just putt <div class="bg">Background</div> between <div class="c1">Content 1</div> and <div class="c2">Content 2</div>
like this

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>

</div>

You can see the reason on https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

How to position absolutely a div within a flex box without influencing the position of its siblings?

As you've discovered, an absolutely-positioned flex item factors into justify-content calculations in some browsers despite the fact it should be removed from the normal flow.

As defined in the spec:

4.1. Absolutely-Positioned Flex
Children

As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.

In Firefox and IE11, however, absolutely-positioned flex items act like normal siblings in terms of alignment with justify-content.

Here's an example. It works in current Chrome, Safari and Edge, but fails in Firefox and IE11.

flex-container {  display: flex;  justify-content: space-between;  position: relative;  background-color: skyblue;  height: 100px;}flex-item {  background: lightgreen;  width: 100px;}[abspos] {  position: absolute;  z-index: -1;}

<flex-container>  <flex-item>item 1</flex-item>  <flex-item>item 2</flex-item>  <flex-item abspos>item 3</flex-item></flex-container>

Flexbox and absolute positioning not working in Chrome and Safari

Absolute elements wont get positioned by the parents aligns. Just position it with left and transform it to center it.

just a sidenote, there is no need to use display: flex; on the absolute element.

.button {  align-items: center;  background-color: deeppink;  border: 2px solid;  border-color: aqua;  cursor: pointer;  display: inline-flex;  font-size: 20px;  font-weight: bold;  justify-content: center;  margin-bottom: 5px;  padding: 3px 10px;  position: relative;  text-transform: lowercase;}
.button:after {  content: '';  background-color: deepskyblue;  bottom: -4px;  font-size: 5px;  position: absolute;  width: 25%;  height: 10px;  left: 50%;  transform: translateX(-50%);}

<button type="button" class="button">Submit</button>

Flex with absolute positioning does not work in safari

Here is one option, using display: inline-block instead of flexbox, and transform: translate.

window.addEventListener('load', function() {  document.querySelector('button').addEventListener('click', function() {    var ques = document.querySelector('.text-container:not(.hidden)');    ques.classList.toggle('hidden');        var next = ques.nextElementSibling;    if (next) {      next.classList.toggle('hidden');      return;    }    document.querySelector('.text-container').classList.toggle('hidden');  })})

.container {  height: 160px;  background: black;}.question {  position: relative;  margin: 0 auto;  width: 90%;  height: 100%;  overflow: hidden;}.text-container {  position: absolute;  top: 50%;  left: 50%;  width: 100%;  transform: translate(-50%,-50%);  color: white;  transition: left 0.5s;}.text-container.hidden {  left: -50%;}.q {  display: inline-block;  width: 20%;  vertical-align: top;}.q-text {  display: inline-block;  width: 80%;  vertical-align: top;  padding-right: 12%;  box-sizing: border-box;}button {  margin: 15px 0;  padding: 10px;}

<div class="container">  <div class="question">
    <div class="text-container">      <div class="q">        Qest1:      </div><div class="q-text">        1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an      </div>    </div>
    <div class="text-container hidden">      <div class="q">        Qest2:      </div><div class="q-text">        2Lorem Ipsum is simply dummy text of the printing and ty      </div>    </div>
    <div class="text-container hidden">      <div class="q">        Qest3:      </div><div class="q-text">        3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when      </div>    </div>
  </div></div><button>Next question</button>

How does the order property work on absolutely-positioned children of a flex container?

The statement you quoted from the spec:

Absolutely-positioned children of a flex container do not participate
in flex layout, but are reordered together with any flex item
children.

... doesn't actually exist in the order property definition. It's included at the end of the spec in the clarifications section.

Nonetheless, the order definition does say this:

Applies to: flex items and absolutely-positioned children of flex
containers

But that's all the definition says about absolutely-positioned children of a flex container. There is no further guidance or clarification.

Therefore, browser makers have significant discretion in implementing this feature. And it appears that the major browsers have not even begun implementation, as testing shows that order is doing nothing on abspos children of a flex container. Tested in Chrome, FF, IE11 and Edge.

Here's an interesting comment from a related question:

I don't consider this a legitimate solution, but if I add position:absolute with some javascript after the page loads instead of it being in the css file, order works as expected

Flexbox and Position Absolute Without Top/Bottom in Chome vs. FF & IE

Yes, this is a difference in layout between Blink and WebKit.

I think the current recommendation would be to either specify the top and left, or use something that has better behavior.

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.
Absolutely positioned children should not participate in the flex box layout model.
They should be treated as the starting item in the element.

Edit: They may need to update their test cases - they need to separate Blink and WebKit, and they need this particular overlap test.

IE 11 flex align-Items: center with an absolute positioned div aligns the top of the div not the middle

Add CSS .arrowWrapper {margin: 0 auto;} and .arrow {left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); top: 50%}

.crumb {    width: 100%;    height: 100px;    background-color: grey;}
.arrowWrapper {    height: 100px;    width: 100px;    background-color: red;    display: flex;    align-items: center;    position: relative;    justify-content: center;    margin: 0 auto;}
.arrow {    height: 60px;    width: 80px;    background-color: blue;    position: absolute;    right: 0;    left: 0;    top: 50%;    bottom: 0;    margin: 0 auto;    transform: translateY(-50%);}

<div class="crumb">    <div class="arrowWrapper">        <span class="arrow"></span>    </div></div>

Absolutely Positioned Flex Item Is Not Removed from the Normal Flow in Ie11