Estoy creando una vista previa de un documento, que se divide en páginas DIN-A4 separadas. Esas páginas A4 son bloques blancos con un margen entre ellos.

Ahora necesito una forma de mover elementos a la página siguiente tan pronto como no quede espacio en la página actual.

Actualmente estoy pensando en implementar una solución usando JavaScript para detectar si un elemento está desbordando la página actual (que se puede verificar con el.clientHeight < el.scrollHeight o cosas similares), y luego marcar ese elemento y todos los nodos siguientes para comenzar la página siguiente. No creo que este sea el enfoque más hermoso, ya que requerirá múltiples ciclos de renderizado para obtener el resultado. ¿Tiene alguna sugerencia sobre cómo resolver este problema de una manera inteligente?

Conozco muy bien CSS y no creo que haya una manera de resolver esto con flexbox, ya que flex no puede mover elementos de un div (que es una página con fondo blanco) a otro div.