flexbox 四平铺布局

Question

我想创建一个基于 flexbox 的 2x2 布局，其中包含四个相等的图块。这是一个小提琴https://jsfiddle.net/1Lw5hge3/2/。 最初的 1x2 水平分割效果很好，我设置了

.half
{
     flex: 0 0 50%;
}

据我了解，这等于“不要增长或收缩，只需将其设置为 50%”。即使其中一个图块没有内容，它也可以正常工作。

但是，当我对嵌套的 quarter 磁贴尝试相同的方法时，它不起作用。每个图块的内容是不同的，它可以是背景图像或一些可变高度的文本。当 flex-grow 设置为 0 时，图块根本不会扩展到全高，只会扩展到内容高度。当我将它设置为1时，它们会扩大，但比例不是50％，它们是基于内容的（例如带有小引号和图像的图块，显然图像图块没有初始高度，因此带有引号的图块更高）。

有没有办法正确设置quarter 磁贴的高度，而不管内容如何？我不确定half 是如何工作的，也许container 的东西可以解决它？

Answer 1

将 flex-basis 设置为 0 而不是 50% 并将 flex-grow 设置为 1 解决了这个问题

.quarter
{
    flex: 1 0 0;
}