Unwanted space between wrapping flex-items - css

Question

When I set flex-container height larger than what flex-items would occupy, items that wrap, have space between them. Mind you - justify-content and align-items are both set to flex-start. Here is snippet (click on full page after run)
.flex-container {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
header,
main,
aside,
footer {
padding: 1rem;
background-color: tomato;
}
header,
footer {
width: 100%;
}
main {
width: 75%;
}
aside {
flex-grow: 1;
}
<div class="flex-container">
<header>Header Content</header>
<main>Main content here.</main>
<aside>Sidebar content</aside>
<footer>Footer Content</footer>
</div>
Here's the pen
This can be reproduced with flex-direction: column; if you reversed all the properties. Is this expected behavior? If so, why? Is there a way I came around this and get something like that:
with the flex-container height set to 100vh ?

Answer 1

The correct answer without adding extra markup, is align-content: flex-start; - default is stretch, that's why wrapping elements have extra space between them, when the flex-container's size exceeds the size of the elements in it.

Answer 2

If I good understand your question - you can add following div .wrappper inside flex-container
.wrapper {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-basis: 100%;
}
body {margin: 0}
.wrapper {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-basis: 100%;
}
.flex-container {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
header,
main,
aside,
footer {
padding: 1rem;
background-color: tomato;
}
header,
footer {
width: 100%;
background-color: blue;
}
main {
flex-basis: 75%;
flex-grow: 1;
background-color: yellow;
}
aside {
flex-grow: 1;
}
<div class="flex-container">
<div class="wrapper">
<header>Header Content</header>
<main>Main content here.</main>
<aside>Sidebar content</aside>
<footer>Footer Content</footer>
</div>
</div>
Explanation what previous solution doesn't wokrs: because the height of your flex items was set to 1rem+font size, and the align-items: flex-start; was set so flex not change items height but put them on proper place (flex-start). But if you would use align-items: streth; then flex will stretch elements. Because you want to have 100vh for .flex-container, we need to use wrapper which was not stretched to full height of container because container has still align-items: flex-start;. And that wrapper height is sum of his chidren height without extra space.