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

Question

我正在尝试向元素内的display:flex元素添加填充。如果将填充定义为百分比，则在Firefox中不会显示填充，尽管在中定义时会显示px。两种情况在Chrome中都可以正常工作。

div {

    background: #233540;

}

div > div {

    color: #80A1B6;

}

.parent {

    display: flex;

}

.padded {

    padding-bottom: 10%;

}


<div class="parent">

    <div class="padded">

        asdf

    </div>

</div>

Answer 1

网格/弹性百分比

该小组试图研究如何定义垂直百分比边距和填充。注意：传统上，CSS的顶部和底部页边距是针对包含块的宽度而不是其高度进行解析的，这具有一些有用的效果，但通常令人惊讶。现有的布局模式当然必须继续这样做。先前的小组解决方案是针对选项2（如下）的，但Google认为他们掌握了有关吸收行为的新信息，值得重新考虑。

讨论归结为三个潜在的解决方案：
选项1：始终按宽度解析百分比。
选项2：网格和弹性根据高度分解，而绝对项目始终按照宽度分解。
选项3：网格和弯曲（包括其吸收项目）

根据高度确定。其他地方的弃权问题继续根深蒂固。在草编民意测验中，该组在选项1和3 之间平均分配。微软将反对选项1，谷歌反对选项3，因此讨论陷入僵局，并将在F2F期间私下继续进行，以期得出结论。

Flexbox％后续行动

[…]尚无结论。
当前的Flexbox规范对此进行了警告：

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

自己的轴（左/右百分比针对宽度，顶部/底部百分比针对高度）内联轴（左/右/上/下百分比均针对宽度进行解析）
用户代理必须选择以下两种行为之一。注意：这种差异很糟糕，但是可以准确地捕获当前的世界状态（实现之间没有共识，CSSWG 内部也没有共识）。CSSWG的意图是使浏览器集中在一种行为上，届时规范将进行修改以要求这样做。

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

但是，最近CSS WG 解决了（存在一些争议）：

flexbox和grid项的上，下边距和填充百分比都根据可用的行内方向解析。