如何使父div包裝（並收縮）其浮動子？

Question

我有一個響應式布局，由一堆元素組成。 這是代碼的一個非常簡化的版本：

HTML：

<div class="parent">
  <div class="header"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS：

.parent {
  background: red;
  display:inline-block;
}

.child {
  background: green;
  width:100px;
  height:100px;
  float:left;
}

.header {
  background: yellow;
  width:100%;
  height:30px;
}

的jsfiddle

我想要實現的是使標題（黃色框）與子div（綠色框）的寬度相同。 當首先渲染布局時，它運行良好，這是JSFiddle的截圖

但是當屏幕尺寸變得更窄時，標題不會正確縮小，這里是一個較小區域的屏幕截圖：

我花了幾個小時試圖搞清楚，但我做不到。 部分挑戰是我事先並不知道綠色盒子的數量是什么，因為它們是由.NET動態呈現的

更新1

需要綠色框包裝的事實，我想要實現的是黃色框具有與綠色框的組合寬度相同的寬度。 期望的結果：

Answer 1

我不認為用純CSS做你想做的事。 懸空空間就在那里，因為剩下多少空間。 盒子就在下方，因為上方沒有空間，你不能縮小黃色標題，因為它不會“知道”綠箱不適合的事實。 我嘗試了一些黑客，但無法讓它工作。 最安全的選擇是與JS合作。

但是，如果您可以靈活地更改設計，可以找到一些值得檢查的替代方案。

1.根本不要指定尺寸

你可以讓flex-box做它的事情。 JSFiddle 。 適用於每個元素，但根據父級大小和子級數量，它們會變得太大或太小。

2.允許中間的空間

再次使用flex-box ，你可以使用justify-content: space-between來保持標題從最左邊的框到最右邊的框正確，但是在它們之間引入空格。 JSFiddle 。