title: How to spread dynamic divs vertically, evenly?
body: <p>Basically, i want the child divs to spread out evenly in the parent div, and if, one of the child divs is removed, the rest should resize and to fill the remaining space evenly again.</p>
  
  <p>Ex:</p>
  
  <pre><code> ---parent---------------
  |  --------------------  |
  | |              child | |
  |  --------------------  |
  |  --------------------  |
  | |              child | |
  |  --------------------  |
  |  --------------------  |
  | |              child | |
  |  --------------------  |
   ------------------------   
  </code></pre>
  
  <p>now when a child div is remove, it should become</p>
  
  <pre><code> ---parent---------------
  |  --------------------  |
  | |              child | |
  | |                    | |
  | |                    | |
  |  --------------------  |
  |  --------------------  |
  | |              child | |
  | |                    | |
  | |                    | |
  |  --------------------  |
   ------------------------   
  </code></pre>
  
  <p>Now, i want to do this with only pure html/css, but at the moment i can't find a solution.</p>
  
  <p>The two other alternatives i am considering are to:</p>
  
  <ul>
  <li>calculate the heights using javascript</li>
  <li>create different classes for a bunch of scenarios (eg: a parent with
  2 child divs, 3 child divs, 4 child divs, etc) and then load them
  accordingly with php</li>
  </ul>
  
  <p>Anyone got a better idea ?</p>