This is a tricky problem we didn't have a solution for so far. However, your idea to use the calculated height of the body could be a solution.
Here I render the template twice. After the first, I get the number of pages and render again and use the information to style the body height. Then it is just about flex.
https://playground.jsreport.net/w/anon/r8xAhhwq
Please let me know if this helps.
PS: Side question - How do I prevent specific body elements from breaking when the page breaks?
There is a standard CSS property for this
https://www.w3schools.com/cssref/pr_print_pagebi.php