Flex Gridlayout with flex-direction row and different heights of row - html

Question

I need a flex grid, where each grid cell has equal width, after every second cell it should wrap. But some cells should have full width. So far no problem.
But I want some of these cells have a fixed height.
In my example I want the blue background to be hidden and filled by the cells below the first one. Is this possible without adding more html tags?
The outcome should look like the second box, but without the additional html tag.
.flex-container {
background-color: blue;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
width: 300px;
height: 300px;
border: red 5px solid;
}
.flex-item {
background: tomato;
width: 50%;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border: green 1px solid;
box-sizing: border-box;
}
.flex-item:first-child {
width: 100%;
height: 50px;
}
.flex-container2 {
background-color: blue;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
width: 300px;
height: 300px;
border: red 5px solid;
}
.flex-item2 {
background: tomato;
width: 100%;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border: green 1px solid;
box-sizing: border-box;
height: 50px;
}
.additional-flex-container {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
width: 100%;
height: calc(100% - 50px);
flex-grow: 1;
}
.additional-flex-container .flex-item2 {
background: tomato;
width: 50%;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border: green 1px solid;
box-sizing: border-box;
height: auto;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<hr/>
<div class="flex-container2">
<div class="flex-item2">1</div>
<div class="additional-flex-container">
<div class="flex-item2">2</div>
<div class="flex-item2">3</div>
<div class="flex-item2">4</div>
<div class="flex-item2">5</div>
</div>
</div>

Answer 1

The only possibility I found was to calculate the height of all items. It is not as flexible as I want it, but I can play around at least with some additional classes.
.flex-container {
background-color: blue;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
width: 300px;
height: 300px;
border: red 5px solid;
}
.flex-item {
background: tomato;
width: 50%;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border: green 1px solid;
box-sizing: border-box;
height: calc((100% - 50px) / 2);
}
.flex-item:first-child {
width: 100%;
height: 50px;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>