绝对定位干扰Firefox中的flexbox定位

Question

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

.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容器中定位元素的以下内容：

  

因为它是一个流动的，一个绝对定位的flex的孩子   容器不参与flex布局。

MORE INFO HERE

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

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

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

justify-content:space-between

现在我希望剩余的元素可以垂直展开，因为我在主容器上有ui.bootstrap.typeahead。我确实在Chrome中获得了所需的行为。见下面的截图：

但是FIREFOX中的BU是你看到的东西

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

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

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

Answer 1

那是因为old version of the spec：

  

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

这是later已修改：

  

静态位置旨在或多或少地匹配位置   一个匿名的0×0流入'flex-start'对齐的flex项目   参与flex布局，主要区别在于任何   包装空间由于'合理内容：空间'或   '对齐 - 内容：空间 - 介于'周围被抑制   假设项目

但是Firefox没有实现这种改变。