Absolute positioning interfering with flexbox positioning in Firefox

Question

I have a bit of a complex question on flexbox. Basically, my demo works in Chrome but not in Firefox. Below is my HTML code:

<div class="flex-main-container">

    <img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt="">
    <img src="http://www.buntycars.com/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt="">

    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>
    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>

</div>

Now the documentation has the following to say about positioned elements in flex containers:

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

MORE INFO HERE

Now I have positioned two elements, i.e., the images absolutely like so:

.flex-main-container > img:nth-of-type(1) {
        position: absolute;
        left: 0;
        top: 0;
}

.flex-main-container > img:nth-of-type(2) {
        position: absolute;
        left: 100px;
        top: 150px;
} 

Now on the container I have the following code:

.flex-main-container {
        background: #eee;
        display: flex;
        height: 500px;
        align-items:flex-start;
        justify-content:space-between;
        flex-direction: column;
} 

Now I would expect the remaining elements to spread out vertically since I have justify-content:space-between on the main container. I do get the desired behavior in Chrome. See screenshot below:

BUT THE BUG IN FIREFOX IS WHAT YOU SEE BELOW

Notice how in Firefox the black car image is not aligned to the top-right like it is in Chrome. Somehow in Firefox the absolutely positioned elements still seem to interfere in the positioning of the remaining elements, which I believe this shouldn't be the case.

Why is this happening? Why is Firefox allowing absolutely positioned elements to interfere in the positioning of other static elements?

P.S. This is a "why" question. I am not just looking for a "hack" to fix this, but I am actually interested in why is this happening.

Answer 1

That's because of an old version of the spec:

Absolutely positioned children of a flex container are not themselves flex items, but they leave behind "placeholders" in their normal position in the box tree. These placeholders are anonymous inline boxes with a width, height, and line-height of ‘0’, and they interact normally with the flexbox layout algorithm.

This was later modified:

The static position is intended to more-or-less match the position of an anonymous 0×0 in-flow ‘flex-start’-aligned flex item that participates in flex layout, the primary difference being that any packing spaces due to ‘justify-content: space-around’ or ‘justify-content: space-between’ are suppressed around the hypothetical item

But Firefox didn't implement that change.