Estoy tratando de hacer que un diseño de flexbox funcione. No soy un experto en HTML / CSS. :(

Tengo un diseño flexbox con encabezado y pie de página fijos y contenido que ocupa el resto del espacio disponible de la página.

Cuando pongo datos en el área de contenido que es más larga que ese espacio disponible, el contenido se desplaza. Pero quiero lograr algo diferente.

Me gustaría tener varios divs (uno debajo del otro) en el área de contenido y cada div debería ser tan alto como el área de contenido (incluso si el contenido es pequeño), por lo que tengo una especie de paginación dentro del área de contenido.

Hace un par de días he intentado mucho y he leído mucho, pero no puedo hacerlo funcionar. ¿Cómo puedo hacer que un div dentro del área de contenido desplazable ocupe todo el espacio (altura)?