Dynamic page-breaks causing extremely large whitespace

Question

I am working on dynamically creating page breaks to print a form where the content is dynamically created. (Unknown divs, unknown heights, etc.), basically a user generated form.

let staticHeight = 0;
let pageHeight = 1000;
let $components = $('.form-component') <---- FORM INPUTS (textarea, radios, etc.)

 $components.each(function(index) {

    staticHeight += $(this).height();

    if (staticHeight > pageHeight) {


        $(this).after('<div style="page-break-after:always; page-break-inside: avoid;"><b>-------BREAK-------</b></div>');
        staticHeight = 0;
    }


 });

I have some simple css.

  body.printContainer {
    position: relative;
    left: 0;
    top: -250px;

}

And the content that I am trying to print.

<div class="printContainer">
        <div class="div1">
            <div class="div2">
             <DYNAMIC FORM HERE WITH UNKNOWN DIVS>
            </div>
        </div>
</div>

now it seems like the page-breaks are working, but there is a ton of white space at each break.

I am printing ----------BREAK------ at each location where the page should occur.

Any help would be greatly appreciated!