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

设置柔性基础上的0，而不是50％和Flex-长到1解决了这个问题

.quarter 
{ 
    flex: 1 0 0; 
}