I’m struggling to arrange content like in a book. I have several images and paragraphs that should distribute themselves onto pages for later pdf conversion. An crude exaple would be: https://codepen.io/abhishekhonrao/pen/bGVbWmK but with rows instead of columns.
To add difficulty, each page should have a footer, and there are pages that end when specific content types are exhausted, eg. in the glossary, there should be empty space till the end of the page, it should not immediately start with the books primary text.

I have tried to use flexbox but to no avail. The content is either squeezing onto sibling elements or it is overflowing a page with elements cut in half, covering the next row/page. Regarding the page footer I don’t even have an idea how that could work with pure CSS.

How would one tackle this problem? Is CSS even capable handling such a thing?