Html Flex元素忽略Firefox中的填充百分比

我正在尝试向

display:flex

元素中的元素添加填充。当填充被定义为百分比时，它不会显示在Firefox中，尽管在

px

中定义时会显示。这两种情况在Chrome中都能正常工作

div{
背景：#233540；
}
div>div{
颜色：#80A1B6；
}
.家长{
显示器：flex；
}
.软垫{
垫底：10%；
}

asdf

对我来说，这就是诀窍：将display:table添加到div中。不过，我不知道这是否会导致其他问题。

div{
背景：#233540；
显示：表格；
}
div>div{
颜色：#80A1B6；
}
.家长{
显示器：flex；
}
.软垫{
垫底：10%；
}

asdf

请参见

网格/弹性百分比

• 该小组试图研究垂直百分比利润率是如何变化的 并且定义了填充物。
  • 注意：CSS中的上下页边距传统上是 根据包含的块宽度而不是其 高度，具有一些有用的效果，但通常 令人惊讶的现有的布局模式当然必须继续 这样做
  • 之前的集团决议是针对方案2（如下），但 谷歌觉得他们有了关于abspos的新信息 值得重新考虑的行为
  • 讨论归结为三种可能的解决方案：
    • 选项1：始终根据宽度解析百分比
    • 选项2：网格和flex根据高度进行解析，以及 abspos项目始终根据宽度进行解析
    • 选项3：网格和flex，包括其abspos项目， 根据高度决定。Abspos别处 继续对宽度进行解析
  • 在一次民意测验中，这群人在两人之间的比例相当平均 备选方案1和3
  • 微软反对选项1，谷歌反对选项3， 因此，讨论陷入僵局，并将继续下去 在F2F会议期间私下进行，以期得出结论

看,

Flexbox%的后续行动

• [……]仍然没有结论

当前警告如下：

可以解决上的百分比边距和填充 反对：

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

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

注意：这种差异很糟糕，但它准确地捕获了当前 世界现状（实现之间没有共识，也没有 CSSWG内部的共识）。CSSWG的意图是让浏览器 将收敛于其中一个行为，此时规范将 修正案规定：

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

但是，最近CSS工作组（与以下人员一起）：

flexbox和网格项的上下边距和填充百分比都会根据可用的内联方向进行解析

请参阅更新的。请尝试以下操作：

.padded {
    padding-bottom: 10vw;
}

---

目前的规范草案说

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

因此，根据最新的草案，Firefox现在是不正确的

CSSWG讨论： 规范变更日志参考：

---

flex项目页边距的当前规范：

是的，更改父项的

显示确实会改变此行为，但问题具体是关于
flex
元素。虽然这并不能真正回答问题，但它确实提供了一种解决当前问题的方法，这一问题目前在更一般的基础上仍未解决。RE:Edit 2：实际上，规范将其定义为浏览器的一种选择，即对上/下边距/填充使用高度或宽度，只要它们一致，并且在所有情况下始终使用一种或另一种。因此，Firefox和Chrome都遵守这一规范。最好的答案可能也是遵循当前的规范：“作者应该避免在flex项目上完全使用填充或边距百分比，因为它们在不同的浏览器中会有不同的行为。”为了提高回答的质量，请说明提问者问题的可能原因，以及您建议的答案如何构成改进。包括你认为对这件事有用的任何资源的链接。这对我来说是一个完美的解决方案。不知道为什么没有其他人对它进行了升级。如果你想让它在某个宽度上保持静态，这是行不通的，因为该宽度不是相对于父容器的，而是整个浏览器的宽度（这意味着它将在浏览器增长时保持填充，这在你有一个最大宽度的容器时是不希望的）。哇。感谢您在政治等方面的广泛采购，非常有用。有没有关于实际定义比率的建议？奥利奥的回答非常有用。一些好消息：截至2018年1月，Edge和FF都同意在下一版本的Edge和FF的v60中实施当前的Chrome方法。请参阅：了解更多信息。这在Firefox60中已修复-