绝对定位干扰 Firefox 中的 flexbox 定位 [重复]

Question

我有一个关于 flexbox 的复杂问题。基本上，我的演示适用于 Chrome，但不适用于 Firefox。下面是我的 HTML 代码：

<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>

现在文档对​​弹性容器中的定位元素有以下说明：

由于它是外流的，因此是 flex 的绝对定位子代 容器不参与弹性布局。

MORE INFO HERE

现在我已经定位了两个元素，即图像绝对像这样：

.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;
} 

现在在容器上我有以下代码：

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

现在我希望剩余的元素垂直分布，因为我在主容器上有justify-content:space-between。我确实在 Chrome 中得到了所需的行为。请看下面的截图：

但 Firefox 中的错误是您在下面看到的

请注意，在 Firefox 中，黑色汽车图像与在 Chrome 中的右上角不对齐。不知何故，在 Firefox 中，绝对定位的元素似乎仍然会干扰其余元素的定位，我认为情况不应该如此。

为什么会这样？为什么 Firefox 允许绝对定位元素干扰其他静态元素的定位？

P.S.这是一个“为什么”的问题。我不只是在寻找“破解”来解决这个问题，而且我实际上对为什么会发生这种情况很感兴趣。

Answer 1

那是因为old version of the spec:

flex 容器的绝对定位子元素不是它们自己 弹性项目，但它们在正常情况下留下“占位符” 在箱形树中的位置。这些占位符是匿名内联的 宽度、高度和行高为“0”的框，它们交互 通常使用 flexbox 布局算法。

这是 later 已修改：

静态位置旨在或多或少地匹配 一个匿名的 0×0 流入“flex-start”对齐的弹性项目，它 参与 flex 布局，主要区别在于任何 由于“justify-content: space-around”而产生的包装空间或 'justify-content: space-between' 在 假设项目

但 Firefox 没有实现该更改。