I want to create a flexbox-based 2x2 layout with four equal tiles. Here is a fiddle https://jsfiddle.net/1Lw5hge3/2/ . Initial 1x2 horizontal split worked fine, I set
.half
{
flex: 0 0 50%;
}
which, as far as I understand, equals to 'do not grow or shrink, just set it to 50%'. it works fine, even if one of the tiles has no content.
However when I tried the same approach for nested quarter tiles it didn't work. The content of each tile is different, it can be a background image or some text of variable height. When the flex-grow is set to 0, the tiles don't expand to full height at all, just the content height. When I set it to 1, they expand, but the proportions are not 50%, they are based on content (e.g. the tile with small quote and image, obviously the image tile has no initial height, so tile with quote is higher).
Is there a way to properly set height for quarter tiles, regardless of content? I'm not sure how half is working, maybe something from container fixes it?
setting the flex-basis to 0 instead of 50% and flex-grow to 1 resolved the issue
.quarter
{
flex: 1 0 0;
}