Равномерно пространство DIV вертикално - html, css, flexbox

Имам HTML, който изглежда така:

<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>

всеки .menu-item-div Трябва да съм равномерно раздалечена вертикално за да запълниш височината на div .page-break има определена височина от 210 мм.

всеки .page-break div ще има различен брой .menu-item-div в него. Трябва да съм в състояние да разпределям по еднакъв начин тези раздели вертикално, но да остана в тях .page-break div "височина 210 мм.

Решението използващо flexbox е добре, просто не знам достатъчно гъвкава кутия, за да направя това.
Друго изискване е тези раздели да бъдат отпечатани и те трябва да работят, когато са отпечатани.

Отговори:

Задайте следните свойства на контейнера

.page-break {
display: flex;
flex-direction: column;
justify-content: space-between;
}

цигулка

.page-break {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 200px;
border: 1px solid green;
}
.menu-item-div {
background: tomato;
height: 40px;
/* If there was real content in the markup this would not be necessary */
}

<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>