Estou tentando descobrir como o flexbox funciona (deveria funcionar? ...) para casos como abaixo:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

JSFiddle aqui

O problema é que, quando há espaço suficiente para encaixar elementos, estou tendo um bom filho bem ajustado, com espaçamento uniforme entre eles. (primeiro bloco div superior)

No entanto, quando não há espaço e texto suficientes dentro das crianças começa a ser agrupados, tudo meio que segue uma direção estranha - as crianças não estão mais em boa forma e, mesmo após a quebra, há espaço suficiente em torno das crianças flexíveis, porque não há mais condições adequadas , space-around realmente não tem chance de funcionar tão bem (segundo bloco div)

No entanto, se eu adicionar quebras de linha manuais em locais onde as quebras de linha automáticas ocorrem, tudo fica definido como "deveria" ... (inferior, terceiro bloco)

O que eu gostaria é de sempre ter filhos bem ajustados em suas caixas (bordas pretas) e qualquer espaço restante, seria distribuído igualmente entre eles, sem que eu precise adicionar quebras de linha manuais (o que não é uma opção no meu caso) )

É possível de alguma forma?…