title: How to make a parent div wrap (and shrink) its floating children?
body: <p>I have a responsive layout which consists of a bunch of  elements. Here is a very simplified version of the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div class="header"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.parent {
    background: red;
    display:inline-block;
  }
  
  .child {
    background: green;
    width:100px;
    height:100px;
    float:left;
  }
  
  .header {
    background: yellow;
    width:100%;
    height:30px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/452nhsa9/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>What I am trying to achieve is making the header (yellow box) take the same width as the child divs (green boxes). And it works well when the layout is rendered at first, here is a screenshot from the JSFiddle
  <a href="https://i.stack.imgur.com/QCDnZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QCDnZ.png" alt="enter image description here"></a></p>
  
  <p>But when the screen size becomes more narrow the header doesn't shrink correctly, here is a screenshot for a smaller area:</p>
  
  <p><a href="https://i.stack.imgur.com/JsCbz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JsCbz.png" alt="enter image description here"></a></p>
  
  <p>I spent a few hours trying to figure it out, but I could not. Part of the challenge is that I don't know in advance what the number of green boxes is going to be as they are rendered dynamically by .NET</p>
  
  <p><em>Update 1</em></p>
  
  <p>The fact that the green boxes wrap is desired, what I'm trying to achieve is for the yellow box to have the same width as the combined width of the green boxes. Desired result:</p>
  
  <p><a href="https://i.stack.imgur.com/fWncQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fWncQ.png" alt="enter image description here"></a></p>