flexbox четыре плитки макет

Question

Я хочу создать Flexbox основе 2x2 макет с четырьмя равными плитки. Вот скрипка https://jsfiddle.net/1Lw5hge3/2/. Initial 1х2 горизонтальное разделение работало нормально, я поставил

.half 
{ 
    flex: 0 0 50%; 
} 

, который, насколько я понимаю, равно 'не расти или уменьшаться, просто установите его на 50%. он отлично работает, даже если одна из плиток не имеет контента.

Однако, когда я пробовал такой же подход для вложенных quarter плит, это не сработало. Содержимое каждой плитки отличается, это может быть фоновое изображение или текст переменной высоты. Если для flex-grow установлено значение 0, плитки вообще не расширяются до полной высоты, а только высоту содержимого. Когда я устанавливаю его в 1, они расширяются, но пропорции не 50%, они основаны на содержимом (например, плитка с малой цитатой и изображением, очевидно, что у плитки изображения нет начальной высоты, поэтому плитка с цитатой выше).

Есть ли способ правильно установить высоту для плиток quarter, независимо от содержания? Я не уверен, как работает half, может быть, что-то от container исправляет его?

Answer 1

установка Flex-основание 0 вместо 50% и прогибается вырастали до 1 решен вопрос

.quarter 
{ 
    flex: 1 0 0; 
}