Uniformemente Space DIVs Verticalmente - html, css, flexbox

Eu tenho HTML que se parece com o seguinte:

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

Cada .menu-item-div Eu preciso estar bem espaçada verticalmente para preencher a altura do div. .page-break tem uma altura de 210 mm.

Cada .page-break div terá um número diferente de .menu-item-div dentro dele. Eu preciso ser capaz de igualmente espaçar esses divs verticalmente, mas ficar contido dentro do .page-break Altura div de 210mm.

Uma solução usando flexbox está bem, eu simplesmente não conheço o flexbox o suficiente para fazer isso.
Outro requisito é que estes divs serão impressos e devem funcionar quando impressos.

Respostas:

Defina as seguintes propriedades no contêiner

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

FIDDLE

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