Flex inside 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 是 flex 项目，而你使用

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

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

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

但是，在 Flexible Box Layout Module、

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

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

但Chrome不同意，并解决了相对于弹性容器宽度的百分比。规范对此发出警告：

Note: This behavior is currently disputed, and might change in a future version of this specification to match the behavior of blocks.

因为你好像没有用flex，可以去掉

.jawcontain {
  display: flex;
}

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

Flex inside flex 在 Firefox 38 中不起作用

Flex inside flex doesent work in Firefox 38

css

firefox

flexbox