Html 为什么'；Firefox和Edge中flex项目的填充/边距百分比工作？

我想在flexbox里放一个正方形的div。因此，我使用：

.outer{
显示器：flex；
宽度：100%；
背景：蓝色；
}
.内部{
宽度：50%；
背景：黄色；
垫底：50%；
}

呵呵

2018年更新

flexbox规范已更新

弹性项目上的百分比边距和填充物，如块上的边距和填充物 框，根据其包含块的内联大小进行解析， e、 g.左/右/上/下百分比均针对其 在水平写入模式下包含块的宽度

---

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

从：

作者应该完全避免在flex项目的填充或边距中使用百分比，因为他们在不同的浏览器中会有不同的行为。

还有一些：

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

• 它们自己的轴（左/右百分比相对于宽度的分辨率，顶部/底部相对于高度的分辨率），或者
• 内联轴（左/右/上/下百分比全部解析宽度）

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

注意：这种差异很糟糕，但它准确地反映了世界的当前状态（实现之间没有共识，CSSWG内部也没有共识）。CSSWG的意图是浏览器将集中于其中一种行为，届时规范将被修改

除此之外，这里还有一个可能的解决方法

当使用百分比时，我们通常会将其与视口宽度联系起来，因此记住这一点，视口单位

vw

/

vh

可以是一个选项，因为它的工作原理类似（响应性）

堆栈片段

.outer{
显示器：flex；
宽度：100%；
背景：蓝色；
}
.内部{
宽度：50%；
背景：黄色；
垫底：50vw；
}

呵呵

@Lichtbringer，我可以在一个网站上使用

display:block

绕过这个问题。请看我的答案中的最后一个要点：当我“需要”使用FraceBox时，对我来说不是一个真正的解决办法。@ Lichtbringer有一个解决方案，检查我的答案。规范已经修改了：UAS必须解决百分比的填充/边距对内联大小的影响：我不认为这是真正的解决方法。我是说，是的，在某些星座中，它可能是你所追求的，但是如果你想让尺寸依赖于父节点，那么使用视口单位是很乏味的，因为你（可能）那时也需要更改其他节点。@Lichtbringer这就是我为什么写“…我们经常把它与视口宽度联系起来，所以要记住…”由于没有其他方法获得基于百分比的值，因此它是唯一的CSSworkaround@Lichtbringer我还添加了第二个示例到我的回答页边距或flex项的填充现在在两种浏览器上都可以正常工作。要使内部元素成为“正方形”，必须移除元素

，或将其从布局中保留（例如

位置：绝对

），因为它具有固有高度。