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>

铬:

火狐:

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

编辑2:是的,看起来规范实际上定义了垂直填充和边距,因为它是根据容器的高度来解决的,所以Chrome可能是不符合规范的那个？ https://drafts.c​​sswg.org/css-flexbox/#item-margins

Answer 1

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

网格/弹性百分比

• 该小组试图研究如何定义垂直百分比边距和填充.
  • 注意:CSS中的顶部和底部边距传统上是针对包含块宽度而不是其高度来解决的,这有一些有用的效果但通常是令人惊讶的.现有的布局模式当然必须继续这样做.
  • 之前的小组决议是针对选项2(下文),但谷歌认为他们有关于有关重新考虑的消极行为的新信息.
  • 讨论归结为三种可能的解决方案:
    • 选项1:始终根据宽度分辨百分比.
    • 选项2:网格和弹性解析高度,abspos项始终根据宽度解析.
    • 选项3:网格和柔性,包括它们的吸收项目,解决高度.Abspos在其他地方继续解决宽度问题.
  • 在一次民意调查中,该组在选项1和3之间分配相当均匀.
  • 微软将反对选项1和谷歌选项3,因此讨论陷入僵局,并将在F2F期间私下继续,以期得出结论.

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

Flexbox%跟进

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

目前的Flexbox规范警告说:

Flex项目的边距和填充百分比可以通过以下任一方式解决:

• 他们自己的轴(左/右百分比分辨宽度,顶/底分辨高度)
• 内联轴(左/右/上/下百分比全部解析宽度)

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

注意:这种差异很糟糕,但它准确地捕获了当前的世界状态(实现之间没有达成共识,并且在CSSWG中没有达成共识).CSSWG的目的是浏览器会聚合其中一个行为,此时规范将被修改为要求.

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

然而,最近CSS工作组解决了(有一些争议):

flexbox和网格项的顶部和底部边距和填充百分比都可以解决可用的内联方向.

请参阅更新的编辑器草稿.

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;
}