如何使父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做你想做的事情是不可能的。悬空空间就在那里，因为剩下多少空间。盒子就在下方，因为上方没有空间，你不能缩小黄色标题，因为它没有＆＃34;知道＆＃34;关于绿箱不适合的事实。我尝试了一些黑客，但无法让它发挥作用。最安全的选择是与JS合作。

但是，如果您可以灵活地更改设计，这里有一些您可能会觉得值得检查的替代方案。

1。不要指定大小

你可以让flex-box做点什么。 JSFiddle。适用于每个元素，但根据父母的大小和孩子的数量，它们会变得太大或太小。

2。允许中间的空格

flex-box再次进行救援，你可以使用justify-content: space-between将标题从最左边的框保持到最右边的框，但是在它们之间引入空格。 JSFiddle