Flex 内部的 Flex 在 Firefox 38 中不起作用

Question

我尝试在 Firefox 中使用 flex，但它不起作用，在 Chrome 中，它就像一个魅力！ 这是 Firefox 中的结果：

这是它在 Chrome/Opera 中的外观（应该看起来）：

有什么问题？

这是在 Firefox 上不起作用的 CSS：

.jawcontain {display: flex;flex-direction: column;justify-content: space-between;border: white solid 7px;border-radius: 23px;}

.jaw {background-color: rgb(24, 24, 24);border-radius: 5%;display: flex;flex-direction: row;padding-top: 2%;padding-bottom: 5%;border: 10px solid rgb(0, 151, 255);justify-content: space-around;}

.hala {border: white solid 2px;padding-left: 10%;border-radius: 5%;margin-right: 2% display: flex;flex-basis: 40%;flex-direction: column;background: black;justify-content: space-around;}

Answer 1

问题是.jaw 是弹性项目，而你使用

.jaw {
  padding-top: 2%;
  padding-bottom: 5%;
}

在 CSS 2.1 中，padding 中的百分比被指定为

百分比是相对于宽度计算的 生成框的containing block，即使是'padding-top' 和'padding-bottom'。

但是，在Flexible Box Layout Module，

flex items 上的百分比边距和填充总是被解析 针对它们各自的尺寸；与块不同，它们并不总是 解决其包含块的内联维度。

因此，Firefox 尝试根据 flex 容器的 高度 解析这些百分比。但是那个高度是auto，也就是说，它取决于内容的高度，包括垂直填充。这是一个循环定义，因此填充计算为0。

但 Chrome 不同意，并根据 flex 容器的宽度解析百分比。规范对此提出警告：

注意：此行为是 currently disputed，并且可能会在 本规范的未来版本以匹配块的行为。

由于你似乎没有使用 flex，你可以删除

.jawcontain {
  display: flex;
}

然后，.jaw 将不再是弹性项目，填充将根据包含块的宽度进行解析。