百分比保证金应如何处理弹性项目？

Question

尝试向Flex容器中的项目添加百分比margin-top我发现Firefox和Chrome之间存在不一致。

如果弹性项目声明margin-top: 25%，则Firefox将其解释为将其置于父级高度的25％（在这种情况下为25像素）：

如果更改了父元素的宽度，则子元素不会垂直移动，我觉得非常直观。

但是当我在Chrome中尝试相同时，我发现边距顶部被视为父宽度的25％（在这种情况下为50像素）：

如果更改了父元素的宽度，则子元素向上或向下移动，我发现从顶部声明为25％的元素非常奇怪。

Complete code on jsFiddle

现在，正确的行为是什么？哪个浏览器搞砸了？

Answer 1

根据spec

  

弹性项目的边距和填充百分比始终根据各自的尺寸进行解析;与块不同，它们并不总是根据其包含块的内联维度来解析。

     

注意：此行为目前存在争议，可能会在此规范的未来版本中更改，以匹配块的行为。

  

哪个浏览器搞砸了？

正如你所看到的......两者兼而有之。 ：）