我試圖弄清楚 flexbox 如何工作（應該工作？...）對於如下情況：

.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

問題是，當有足夠的空間來容納元素時，我會得到一個漂亮的緊身孩子，並且孩子之間的間距均勻。 （第一，頂部 div 區塊）

然而，當子項中沒有足夠的空間並且文字開始換行時，這一切都會朝著一個奇怪的方向發展- 子項不再緊密貼合，即使換行後，彈性子項周圍也有足夠的空間，因為沒有不再合適了，周圍的空間實際上沒有機會發揮作用（第二個div 區塊）

但是，如果我在自動換行符發生的地方添加手動換行符，所有內容都會按“應該”的方式佈局......（底部，第三塊）

我想要的是始終讓孩子們緊緊地固定在他們的盒子（黑色邊框）內，無論剩下的空間，都會在他們之間均勻分佈，而無需我添加手動換行符（這不是一個選項）就我而言）

這可能嗎？ ...