I'm trying to figure out how flexbox works (should work?...) for a situation like this:

.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>

Here is JSFiddle

The problem is that when there is enough space to hold the elements, I get a nice tight child with even spacing between the children. (first, top div block)

However, when there isn't enough space in the child and the text starts wrapping, it all goes in a weird direction - the children no longer fit snugly, and even after wrapping, there's still enough space around the flex child , because it doesn't fit anymore and the surrounding space doesn't actually have a chance to work (the second div block)

However, if I add manual line breaks where the automatic line breaks occur, everything is laid out the way it "should"... (bottom, third block)

What I want is to always have the children tightly within their box (black border) and whatever space is left will be evenly distributed between them without me adding manual line breaks (which is not an option) in my case)

is it possible? ...