Flexbox: space between items in grid - css

Question

I'm trying to make a responsive layout with media queries with flexbox. I need to make a layout with two sidebars on the right, right under each other, like this:
Image: aside right under the related
The current situation is like this (I'm able to move the box to the right too, but there is still a white space under the related, even though the height is good). Image: aside is on the the next line and not under the related
Simplified code:
body {
display: flex;
flex-direction: row;
}
header {
flex: 0 1 25%;
}
main {
flex: 0 1 40%;
}
.related {
flex: 0 1 17%;
height: 100%;
}
aside {
flex: 0 1 17%;
}
footer {
display: flex;
flex: 0 1 100%;
}
I can't put a wrapper for these two boxes in the HTML (I can't use a wrapper in the HTML itself, hence I use the body as flex container). Is what I want even possible with flexbox, or what kind of other technique could I use for this? I tried a lot of different things with the height, I even tried Javascript to make a dynamic wrapper, but that didn't work well with the media queries...
Please let me know if you need more information.

Answer 1

Your usage of body as a flex container, should not be a problem, unless there is a design problem. i think you should make layout design like
<http://codepen.io/erdysson/pen/wKyEzZ%20>
I hope, this solves the problem and is what you want.

Answer 2

Achieving the expected result without modifying your HTML markup with flexbox is a bit tricky.
However i believe the following example will help you, even though it´s not using the flexbox:
* {
box-sizing: border-box;
}
header,
aside,
footer,
.main,
.related {
min-height: 100px;
float: left;
position: relative;
}
header {
width: 25%;
background: #f00;
min-height: 200px;
}
.main {
width: 50%;
background: #0f0;
min-height: 200px;
}
.related {
width: 25%;
background: #0ff;
}
aside {
width: 25%;
background: #f0f;
float: right;
}
footer {
width: 100%;
background: #ff0;
}
header:after,
aside:after,
footer:after,
.main:after,
.related:after {
content: attr(data-title);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 22px;
}
<header data-title="header"></header>
<div class="main" data-title="main"></div>
<div class="related" data-title="related"></div>
<aside data-title="aside"></aside>
<footer data-title="footer"></footer>