Flow layout with nested div

Question

I would like to create a horizontal flow layout, where all of my items take up the current line, and then when they reach the end of the current line, they continue onto the next line. This is easy if none of my divs are nested. Unfortunately, I have 2 divs that stay at the beginning and end, and a container div, which holds all of my child items.

The problem becomes when the container div fills up past the width of the overall div, so its flow now must contain that width, and so it gets pushed to a new line. So it ends up looking like this:

b
c c c
c c c
b

But it should look like:

b c c c
c c c b

This was inspired by my Ext JS question, but I figured this is actually an HTML layout issue. Here's an example.

.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>