Flexbox和位置绝对没有顶部/底部在Chome与FF和IE

我发现Chrome和Firefox/Safari之间的Flexbox实现有所不同。如果您的位置绝对元素没有设置顶部/底部/左侧/右侧，则在Chrome中，元素捕捉到顶部：0，左侧：0，而在其他浏览器中，顶部和左侧值与元素相同静态定位。Flexbox和位置绝对没有顶部/底部在Chome与FF和IE

Take a look at the codepen here.

什么是Flexbox的规范针对这种情况的建议？哪些浏览器或浏览器正在演示buggy行为？

HTML

<div class="flex"> 
    <div class="offset">Offset</div> 
    <div class="absolute">Absolute</div> 
</div>

CSS

.flex { 
    display: flex; 
    flex-direction: column; 
    width: 300px; 
    background: #eee; 
    height: 200px; 
    padding: 8px; 
} 
.offset { 
    width: 300px; 
    height: 96px; 
    background: #ccc; 
    margin-bottom: 8px; 
} 
.absolute { 
    position: absolute; 
    background: red; 
    color: white; 
    width: 300px; 
    height: 96px; 
}

来源

2016-09-29 Alexander Flenniken

看看规格，预期的行为由W3C清楚地概述。 – TylerY86

这不是重复的，“justify-content：space-between;”根本不涉及。 – TylerY86

@ TylerY86，阅读它说：**这个问题已经在这里得到了答案：**这不是关于这个问题，而是关于答案。 –

是的，这是在眨眼和WebKit之间布局的差异。

我认为目前的建议是要么指定top和left，要么使用具有更好行为的东西。

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.
绝对定位的儿童不宜参加柔性盒模型布局。
它们应该被视为元素中的起始项目。

编辑：他们可能需要更新他们的test cases - 他们需要分开Blink和WebKit，他们需要这个特殊的重叠测试。

来源

2016-09-29 02:51:33 TylerY86

Flexbox和位置绝对没有顶部/底部在Chome与FF和IE

回答

相关问题