<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flexRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flexColumn {
display: flex;
flex-direction: column;
justify-content: center;
flex-basis: 100%;
}
.flexBlock {
flex: 0;
display: flex;
flex-direction: column;
padding: 5px;
border: 1px solid blue;
}
.flexColumn > .flexBlock:last-child {
flex: 1;
}
</style>
</head>
<body>
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 1
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 2
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 3
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 4
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 5
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 6
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 7
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 8
<div class="flexRow">
<div class="flexColumn">
<div class="flexBlock">
Nested layout 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>