一尘不染

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

css

我正在尝试向元素内的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>

阅读 260

收藏
2020-05-16

共1个答案

一尘不染

网格/弹性百分比

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

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

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

Flexbox%后续行动

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

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

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

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

但是,最近CSS WG 解决了(存在一些争议):

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

2020-05-16