为什么百分比填充边距在Firefox和Edge中的d性项目上不起​​作用？

为什么百分比填充/边距在Firefox和Edge中的d性项目上不起​​作用？

更新

flexbox规范已更新。

4.2。 Flex项目边距和填充

d性项目（如方块框上的项目）的边距和填充百分比将根据其包含的块的内联大小进行解析，例如，在水平书写模式下，左/右/上/下百分比均根据其包含的块的宽度进行解析。

---

原始答案-适用于2018年之前发布的FF和Edge版本

根据 flexbox规范：

作者应避免在d性项目的填充或边距中完全使用百分比，因为它们在不同的浏览器中会出现不同的行为。

还有更多：

4.2。 Flex项目边距和填充

可以根据以下任一条件解决d性项目上的边距和填充百分比：

• 他们自己的轴（左/右百分比针对宽度，顶部/底部百分比针对高度），或者，
• 内联轴（左/右/上/下百分比均针对宽度进行解析）

用户代理必须选择以下两种行为之一。

注意：这种差异很糟，但是可以准确地捕获当前的状态（实现之间没有共识，CSSWG内部也没有共识）。CSSWG的意图是浏览器将集中于其中一种行为，届时将对规范进行修订。