我試圖弄清楚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>

在CSS中，父容器不知道其子容器何時換行。因此，它繼續擴大自己的規模，而無視內部發生的事情。

換句話說，瀏覽器在初始層疊上呈現容器。當子級換行時，它不會重排文檔。

這就是為什么容器不收縮包裝較窄的布局。它只是繼續下去，就像沒有包裝一樣，右邊的保留空間就是證明。

水平空白的最大長度是容器期望出現的元素的長度。

在下面的演示中，可以看到當窗口水平調整大小時，空白出現又消失

你需要一個JavaScript解決方案(參見這里和這里)...或CSS媒體查詢(見此處)。

在處理環繞文本時，在某些情況下，容器上的text-align: right可能會有所幫助。

好好看看我換的小提琴:

。支架寬度至最大寬度(英寸。五類) 已修改。用于包裝和分隔其子對象的容器 加了2更。五.清晰分類 刪除了& ltbr & gts 而且，最重要的是，添加了flex: 0 0到。兒童 Flexbox幾乎總是需要設置max-width，這比width更靈活。 這取決于您對。孩子的行為，修改flex: 0 0中的flex-grow和flex-shrink來滿足你的需求。(flex的結果:1 0看起來也不錯)

...不需要Javascript...

Codrops Flexbox參考對于理解靈活的盒子布局非常有用。

您的塊之所以會有這樣的行為，是因為CSS渲染。

在第一種情況下，瀏覽器不知道塊何時變得對其內容來說太小。所以它一直拉伸，直到達到最大值，然后渲染文本。

在最后一種情況下，您告訴瀏覽器在哪里斷開，這樣它就知道元素不應該變寬。

解決這個問題的唯一方法是自己設置斷點。

如果你正在尋找一個只有CSS的解決方案，你可以使用類似width:100px；設置子控件和flex的最小寬度:auto以便它生長。

例如:https://jsfiddle.net/ncvp7gzs/1

(注意，這僅在Chrome上測試過)