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; 
}