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>

铬：

火狐：

修改：这可能是因为Mozilla决定根据父容器的高度来解释垂直百分比。对我来说似乎很疯狂。 https://bugzilla.mozilla.org/show_bug.cgi?id=851379

编辑2 ：是的，似乎规范实际上将垂直填充和边距定义为根据容器的高度进行解析，因此Chrome可能不符合规范吗？ https://drafts.csswg.org/css-flexbox/#item-margins

Answer 1

请参阅https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

网格/弹性百分比


该小组试图研究垂直百分比差距     和填充定义。

注意：传统上CSS中的上下边距     解决了包含块宽而不是它的问题     高度，有一些有用的效果，但一般情况下     奇怪。当然，现有的布局模式必须继续     这样做。

之前的小组决议是针对选项2（下方），但是     谷歌认为他们有关于吸收的新信息     值得重新考虑的行为。

讨论归结为三种可能的解决方案：

选项1：始终根据宽度确定百分比。

选项2：Grid和flex解析高度，和             abspos项目总是在宽度上解决。

选项3：网格和弹性，包括它们的吸收项，             解决高度。其他地方的吸收             继续解决宽度。



在一次民意调查中，该小组的评分相当均匀     选项1和3。

Microsoft会反对选项1，Google会反对选项3，     所以讨论陷入了僵局，并将继续下去     在F2F期间私下希望得出结论。

请参阅https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html，

Flexbox％跟进


[...]仍然没有结论。

目前Flexbox spec警告此事：

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


他们自己的轴（左/右百分比分解宽度，顶部/底部分辨高度）

内联轴（左/右/上/下百分比全部解析宽度）


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


注意：这种差异很糟糕，但它可以准确地捕获当前值     世界的现状（实施之间没有达成共识，没有     CSSWG内部的共识）。 CSSWG是浏览器的意图     将集中于其中一个行为，此时规范将是     修改为要求。





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

但是，最近的CSS WG resolved（some controversy}：

flexbox和网格项的上下边距和填充百分比都可以解决可用的内联方向。

请参阅更新后的editor's draft。

Answer 2

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

    div {
        background: #233540;
        display: table;
    }
    div > div {
        color: #80A1B6;
    }
    .parent {
        display: flex;
    }
    .padded {
        padding-bottom: 10%;
    }

    <div class="parent">
        <div class="padded">
            asdf
        </div>
    </div>

Answer 3

试试这个：

.padded {
    padding-bottom: 10vw;
}

Answer 4

目前的规范草案说

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

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

CSSWG讨论：https://github.com/w3c/csswg-drafts/issues/2085 规范更改日志参考：https://drafts.csswg.org/css-flexbox/#change-2017-margin-padding-percent Flex项目边距的当前规范：https://drafts.csswg.org/css-flexbox/#item-margins

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

4 个答案: