我试图弄清楚flexbox在以下情况下是如何工作的（应该工作吗？……):

null

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

null

此处为JSFiddle

问题是，当有足够的空间来容纳元素时，我得到了一个很好的紧身的孩子们，它们之间有均匀的间距。（第一个，顶部div块）

然而，当没有足够的空间，并且孩子们内部的文本开始换行时，这一切就会朝着一个奇怪的方向发展--孩子们不再紧密地适合，即使换行之后，flex孩子们周围有足够的空间，因为不再合适，所以周围的空间也没有机会工作（第二个div块）

然而，如果我在自动换行发生的地方加上手动换行，所有的东西都按“应该”排列…（底部，第三块）

我想要的是总是让孩子们紧紧地装在他们的盒子里（黑色的边框），不管剩下的空间是什么，都将均匀地分布在他们之间，而不是我必须添加手动换行符（在我的情况下这不是一个选择）

有可能吗？…