I have been doing some tests successfully to understand the page breaks properly.
Your HTML code when run as Custom Print format on ERPNext v12, then the Print button used, will render properly the page breaks.
Your HTML code, saved to a standalone file, on a MAC running OS X, with wkhtmltopdf 0.12.3 AND wkhtmltopdf 0.12.5 converted with the terminal command:
wkhtmltopdf page_break.html page_break.pdf
However, no success has been obtained running your HTML code as Custom Print format on ERPNext v12, then generating a PDF from the print dialog.
I personally prefer coding my own HTML and CSS to structure page sizes, etc. and have had limited success with different page sizes, and even locating Jinja rendered elements in specific places on the page (Xmm, Ymm).
I still have some questions:
What specific HTML code allows us to work around the issue, so that the page breaks work using BOTH the Print button and the PDF button in the Print Dialog?
What is the best model (html + Jinja + CSS) to render page breaks automatically as content fills up the page? This is especially useful in multi-page print formats or reports where depending on the amount of data contained for that specific instance, the page numbers will not be fixed.
[EDIT] Solution found here, thanks to @Ratanak :
So far, this code has worked well using Print button in dialog, direct to PDF or printer from Chrome. Selecting Print Using System dialog or PDF renders margins around it (the zoom bug) and the PDF feature from wkhtmltopdf renders one page OK, the others a mess.
<div class="print-format">
{% set pages = ['1','2','3','4','5'] %}
{% for page in pages %}
<div class="simple-header">HEADER</div>
<div class="simple-body">
<h1>Jinja and CSS Tests</h1>
{{ lorem(5) }}
<br>
</div>
<div class="simple-red-footer">FOOTER</div>
</div>
<div class="page-break"></div>
{% endfor %}
For now, this code renders the divs in proper size. Page breaks are doing OK. And page breaks are being triggered when enough data has filled the specific table or page size.
[EDIT] After some moderate coding, I found that if you want extremely consistent results, you should be from “hardcoding” the page breaks in the print format HTML. This means that you must parse the pages and structure with a call to a custom python function made available to the jinja environment vía hooks.py, pass the necessary arguments, such that you get proper results regardless of whether you have a document (sales invoice, quotation, etc.) with 1 item or 1000 items. The function shoul return the html already assembled. Problem solved.