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

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

Background

between

Content 1

and

Content 2

like this

    
Content 1
    
Background
    
Content 2

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