在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]答案

【问题标题】：Flexbox and Position Absolute Without Top/Bottom in Chome vs. FF & IE [duplicate]在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]
【发布时间】：2023-03-20 01:35:02
【问题描述】：

我发现 Chrome 和 Firefox/Safari 在 flexbox 实现方面存在差异。当您有一个没有设置 top/bottom/left/right 的绝对位置元素时，在 Chrome 中该元素将对齐到 top: 0, left: 0，而在其他浏览器中，top 和 left 值与元素相同是静态定位的。

Take a look at the codepen here.

对于这种情况，flexbox 规范的建议是什么？哪些浏览器或哪些浏览器出现错误行为？

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

【问题讨论】：

查看了规范，W3C 清楚地概述了预期的行为。
这不是重复的，justify-content: space-between;根本不涉及。
@TylerY86，阅读它的内容：这个问题在这里已经有了答案：这不是关于问题，而是关于答案。
我阅读了答案。我看不出justify-content: space-between 和这个有什么关系，或者position: absolute 和另一个有什么关系。
您的回答没有说明 W3C 规范。嗯，随便。

标签： html css google-chrome safari flexbox

【解决方案1】：

是的，这是 Blink 和 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 分开，并且他们需要这个特殊的重叠测试。

【讨论】：