Unwanted space between wrapping flex-items

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.