Removing large gap between rows in flexbox layout [duplicate]

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