When you use window.print(), the browser just takes your rendered page and runs it through its print stylesheet (or default rules if you don’t have one). There’s no “pixel-perfect” way to predict where the page will break because the browser converts everything into physical units (inches/mm) based on your screen DPI and printer settings.

If you want predictable results, you should add a @media print CSS section and explicitly control the size of the printed area. For example:

@media print {
  @page {
    size: A4 portrait; /* or letter/landscape */
    margin: 10mm;
  }

  .page-break {
    page-break-before: always;
  }
}
Then, you can measure your elements and insert page breaks where needed by adding class="page-break" in your HTML.

The key thing is: don’t rely on screen px measurements. Convert to in, mm, or use percentages relative to the page. That way you can predict when something will spill over an 11-inch page.