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

As an alternative you can use the flex property inside the content selector(s):

    div.c1 {
      background: #aaeecc;
      width: 100px;
      position: relative;
      z-index: 50; top: 20px;
      display: flex;

      flex: 1; /* add this */
    }

This will set the flex-grow. It might not be exactly what you need, but maybe it helps somebody else that can not reorder the content divs or take them out from the flex wrapper.

Here is the demo: https://jsfiddle.net/s18do03e/14/