收缩容器以适应包裹的子元素-PHP中文网问答

我试图弄清楚 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;
}


  At a glance
  After coverage ends
  Forms & documents






  At a glance
  After coverage ends
  Forms & documents






  At a
    
glance
  After coverage
    
ends
  Forms &
    
documents

这里是 JSFiddle

问题是，当有足够的空间来容纳元素时，我会得到一个漂亮的紧身孩子，并且孩子之间的间距均匀。（第一，顶部 div 块）

然而，当子项中没有足够的空间并且文本开始换行时，这一切都会朝着一个奇怪的方向发展 - 子项不再紧密贴合，即使换行后，弹性子项周围也有足够的空间，因为没有不再合适了，周围的空间实际上没有机会发挥作用（第二个 div 块）

但是，如果我在自动换行符发生的地方添加手动换行符，所有内容都会按“应该”的方式布局......（底部，第三块）

我想要的是始终让孩子们紧紧地固定在他们的盒子（黑色边框）内，无论剩下的空间，都会在他们之间均匀分布，而无需我添加手动换行符（这不是一个选项）就我而言）

这可能吗？...