title: Allow inline block elements to stretch fluidly and collapse and stack as viewports shrink
body: <p>Given the following code, I would like to find a way to have a series of inline-block elements stretch the full width of the parent element while stacking on top of each other as the line wraps.</p>
  
  <pre><code>&lt;div id="parent"&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 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><strong>Example</strong></p>
  
  <p>If all children have the same min-width, I want this to create a grid effect.  For example, on larger screens, the children may stack 5 across until they wrap onto a second line.  I would like those all to be 20% (1/5) of the available width.  As the screen shrinks, the fifth and 10th items wrap leaving two rows of 4 items and a third row of 2 items.  Now I would like to have the children all stretch 25% (1/4) of the available width except for the last row of two children.  Those should be 50% each.</p>
  
  <p><strong>Attempts</strong></p>
  
  <p>I've tried floating the children, making them inline-blocks and I've experimented with flex-box, but none of them are giving me the result I desire.  Inline-blocks have come the closest, allowing them to stack as with parent width shrinks, but I can't achieve the stretching.</p>
  
  <p><strong>Restrictions</strong></p>
  
  <p>I'd prefer not to use media queries as I would then need to write in the exact breakpoints for this example then alter all of them if anything changes in the site layout.  I'd like to find a more organic way to solve this problem.</p>
  
  <p>Javascript is out.  I want to find a way to do this with just CSS.</p>