It's possible that using flex won't give you the desired outcome. One alternative is to experiment with float: left; on child elements, but this may still result in uneven spacing below the content.
You could explore the Masonry layout solution in JavaScript as another option.
Alternatively, utilizing column-count: 3; can help eliminate those white spaces, although the layout will appear as follows:
A D G
B E H
C F J
(arranged from top to bottom similar to a newspaper)
I've included two rules within the ul to prevent the division of content across columns.
display: inline-block;
width: 100%;
.wrapper {
column-count: 3;
}
.wrapper ul {
display: inline-block;
width: 100%;
list-style: none;
padding: 0;
margin: 0 0 1em;
}
<div class="wrapper">
<ul>
<li>List 1 - child</li>
<li>List 1 - child</li>
<li>List 1 - child</li>
<li>List 1 - child</li>
<li>List 1 - child</li>
<li>List 1 - child</li>
</ul>
<ul>
<li>List 2 - child</li>
<li>List 2 - child</li>
<li>List 2 - child</li>
</ul>
<ul>
<li>List 3 - child</li>
<li>List 3 - child</li>
<li>List 3 - child</li>
<li>List 3 - child</li>
<li>List 3 - child</li>
</ul>
<ul>
<li>List 4 - child</li>
<li>List 4 - child</li>
<li>List 4 - child</li>
<li>List 4 - child</li>
<li>List 4 - child</li>
</ul>
<ul>
<li>List 5 - child</li>
<li>List 5 - child</li>
<li>List 5 - child</li>
</ul>
<ul>
<li>List 6 - child</li>
<li>List 6 - child</li>
</ul>
<ul>
<li>List 7 - child</li>
<li>List 7 - child</li>
<li>List 7 - child</li>
<li>List 7 - child</li>
<li>List 7 - child</li>
</ul>
<ul>
<li>List 8 - child</li>
<li>List 8 - child</li>
<li>List 8 - child</li>
<li>List 8 - child</li>
</ul>
<ul>
<li>List 9 - child</li>
<li>List 9 - child</li>
<li>List 9 - child</li>
<li>List 9 - child</li>
<li>List 9 - child</li>
<li>List 9 - child</li>
<li>List 9 - child</li>
<li>List 9 - child</li>
</ul>
<ul>
<li>List 10 - child</li>
<li>List 10 - child</li>
</ul>
</div>