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

Question

We have two divs with content and a third div that is a background with absolute position.

Container is a flexbox.

All works fine in Chrome and Safari, but <

Answer 1

Sometimes it is not possible to re-order stuff, for example when using ::before and ::after. In those cases, you can manually order the elements.

In your case, you would need to do:

.c1 {
  order: -1;
}
.c2 {
  order: 10;
}

The order property is part of the flex spec and lets you re-order flex items (reference on MDN). It's very handy for multiple purposes, this included.

I used -1 because the value is ordinal, so setting it to a negative number ensures it precedes all other defaults and you don't need to specify the value for ::before. For the same reason, using 10 ensures that the second div comes last even if you add a bunch of elements to the container. You can increase that to 100 or whatever.

Still, Firefox's behaviour seems counterintuitive. position: absolute normally removes the element for the usual dom flow and I would expect that element to be removed from the flex flow as well, just like in Safari and Chrome. I am not sure whether the spec clarify this.