具有嵌套div的流布局

Question

我想创建一个水平流布局，其中我的所有项目占用当前行，然后当它们到达当前行的末尾时，它们继续到下一行。如果没有嵌套我的div，这很容易。不幸的是，我有2个div在开头和结尾，还有一个容器div，它包含了我所有的子项。

当容器div填满整个div的宽度时，问题就出现了，因此它的流程现在必须包含该宽度，因此它会被推送到一个新行。所以最终看起来像这样：

b
c c c
c c c
b

但它应该看起来像：

b c c c
c c c b

这是受我Ext JS question的启发，但我认为这实际上是一个HTML布局问题。这是一个例子。

.overall {
  width: 200px;
  border: 1px solid green;
  height: 100px;
}
.button {
  height: 20px;
  width: 20px;
  background-color: blue;
}
.parent {
  float: left;
}
.child {
  height: 18px;
  float: left;
  width: 50px;
  background-color: black;
  border: 1px solid red;
}

<span>Incorrect</span>
<div class="overall">
  <div class="parent button">
  </div>
  <div class="parent container">
    <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>
  <div class="parent button">
  </div>
</div>
<span>Correct</span>
<div class="overall">
  <div class="parent button">
  </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="parent button">
  </div>
</div>