title: Evenly Space DIVs Vertically
body: <p>I have HTML that looks like the following: </p>
  
  <pre><code>&lt;div class="page-break"&gt;  
     &lt;div class="menu-item-div"&gt;
        &lt;!-- CONTENT WITHIN DIV --&gt;
     &lt;/div&gt;
  
     &lt;div class="menu-item-div"&gt;
        &lt;!-- CONTENT WITHIN DIV --&gt;
     &lt;/div&gt;
  
     &lt;div class="menu-item-div"&gt;
        &lt;!-- CONTENT WITHIN DIV --&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each <code>.menu-item-div</code> I need to be evenly spaced apart <em>vertically</em> to fill the div's height. The div <code>.page-break</code> does have a set height of 210mm.</p>
  
  <p>Each <code>.page-break</code> div will have a different number of <code>.menu-item-div</code> within it. I need to be able to equally space these divs vertically but stay contained within the <code>.page-break</code> div's height of 210mm. </p>
  
  <p>A solution using flexbox is fine, I just don't know flexbox enough to do this.<br>
  Another requirement is these divs will be printed and it has to work when printed.</p>