Question

所以，我的目标是有三个方框，根据浏览器的大小扩展/收缩。每个框只包含一行文本，因此我们的想法是使用大量填充来填充额外的空间。

该网站是使用flexbox构建的，我认为我有一个优雅的解决方案，使用：before继承父元素的宽度并使用它的长度作为填充顶部：

这在大多数浏览器中都能很好地运行，但我很惊讶看到Firefox遇到了问题。这是代码的其余部分和JSFiddle。有什么建议吗？

Thee CSS ~~

.square:before {
content:''; 
padding-top:100%;
}

编辑：最简单的修复 - 只需将“display：table”添加到伪元素。

Answer 1

那是因为你使用百分比。

使用块布局，填充的百分比将根据包含块的宽度进行解析，即使填充在垂直方向上也是如此。

但是，flexbox想要更改此行为，并根据包含块的宽度或高度来解析填充，具体取决于填充的方向。

然而，浏览器并不同意。然后，Firefox根据高度解析padding-top: 100%，Chrome会根据宽度进行解析。

对于Firefox，由于包含块的高度取决于内容的高度，并且伪元素的填充是内容的一部分，因此无法解决百分比（它会作为循环参考）。然后它变为0。这类似于父布局height: 100%的块布局中height: auto的情况。

您可以使用显式长度而不是百分比来修复它。