Removing large gap between rows in flexbox layout

Question

This question already has an answer here:

• Remove space (gaps) between multiple lines of flex items when they wrap 1 answer

I have a sidebar that is longer than the content (post previews with thumbnails).

I am using flexbox to build the layout and when the sidebar is longer than the previews, there is a huge gap in between.

I want each row to not have a gap in between as it would if the sidebar was nice and short.

I have thrown together a codepen.

//page wrapper for sidebar
.flexPageWrapper {
  display:flex;
  /* Centering the page */
  max-width:1500px;
  margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-right: 1em;
  flex-direction: row;
}

Answer 1

An initial setting of a flex container is align-content: stretch.

This means that multiple lines in a flex container will expand to cover the length (in this case, height) of the container.

The sidebar is increasing the height of the container, causing your thumbnail content to distribute over a taller space.

You can override this default behavior with align-content: flex-start.

.searchContentWrap {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: 1em;
    flex-direction: row;
    align-content: flex-start; /* NEW */
}

Revised Codepen