Evenly Space DIV verticalmente - html, css, flexbox

Tengo HTML que se parece a lo siguiente:

<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 Necesito estar espaciado uniformemente verticalmente para llenar la altura de la div. La div .page-break Tiene una altura fija de 210mm.

Cada .page-break div tendrá un número diferente de .menu-item-div dentro de ella. Necesito poder espaciar igualmente estos divs verticalmente pero mantenerme contenido dentro del .page-break div "s altura de 210mm.

Una solución que usa flexbox está bien, simplemente no conozco suficiente flexbox para hacer esto.
Otro requisito es que estos divs se imprimirán y tienen que funcionar cuando se impriman.

Respuestas

Establecer las siguientes propiedades en el contenedor

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

VIOLÍN

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