绝对定位干扰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容器中定位元素的以下内容:

由于它不在流动状态,Flex容器的绝对定位子元素不参与flex布局.

更多信息在这里

现在我已经定位了两个元素,即图像绝对如此:

.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中的BU是你看到的东西

请注意,在Firefox中,黑色汽车图像与Chrome中的右上角没有对齐.在某种程度上在Firefox中,绝对定位的元素似乎仍然干扰其余元素的定位,我认为不应该这样.

有人可以解释为什么会这样吗？为什么Firefox允许绝对定位的元素干扰其他静态元素的定位？

PS这是一个"为什么"的问题.我不只是在寻找一个"黑客"来解决这个问题,但我实际上对这为什么会发生这种情况感兴趣.

谢谢.

Answer 1

那是因为旧版本的规范:

Flex容器的绝对定位的子容器本身不是弹性项目,但是它们在盒子树中的正常位置留下"占位符".这些占位符是匿名内联框,宽度,高度和行高为"0",它们通常与flexbox布局算法交互.

后来修改了这个:

静态位置旨在或多或少地匹配参与弹性布局的匿名0×0流入'flex-start'对齐的弹性项目的位置,主要区别在于任何包装空间由于"合理" -content:space-around'或'justify-content:space-between'在假设项目周围被抑制

但Firefox没有实现这一改变.