Critério da quebra de linha (no caso, coluna) utilizando o flex-wrap

No vídeo "Arrumando o course map", o instrutor adiciona a instrução flex-wrap:wrap ao elemento nav, nesta hora acontece uma divisão dos elementos em colunas, baseados na altura limite do elemento pai, porém o que observei é que a quebra sempre acontece no elemento h4 e em alguns casos, mesmo tendo algum espaço na coluna sempre que o próximo elemento é um h4 a quebra de linha acontece novamente.

Minha pergunta é: Qual o critério utilizado para que o flexbox saiba que a quebra da coluna deve acontecer no elemento h4?

<nav class="rodapePrincipal-navMap-list">
    <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Java</a>
    <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
    <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
    <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
    <a class="rodapePrincipal-navMap-link" href="#">Python</a>
    <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
    <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
    <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>

    <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
    <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
    <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
    <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>

    <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
    <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
    <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
    <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
    <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
    <a class="rodapePrincipal-navMap-link" href="#">Django</a>
    <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>

    <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
    <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
    <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
    <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
</nav>