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