Reports

I think you are very close, using flex-direction: column and margin-top:auto on the footer works, but then when content overflows a single page, the browser breaks it naturally and your footer no longer sticks to the bottom of the las page.

However i don't think css alone can force a sticky footer to the bottom of the last page when printing multi-page content.

you can try @media print to control breaks a bit better:

@media print {
 article {
  page-break-after:always;
  display: block; /*this overrides flex for print if 
        needed*/
  position: relative;
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}
section {
 page-break-inside: avoid;
}
}

However, the implementation above assumes each invoices fits on page.

Another option is, you could use a pdf generator, you could use libraries like jsPDF (if generating in-browser) or pdfmake.

The final option i can think of is to wrap all the section plus footer in a .page div and simulate a fixed height:

.page {
 height: 100vh;
 display: flex;
 flex-direction: column;
}

.page footer {
 margin-top: auto;
}

But then again, this only works if each invoice fits within one page.

I hope one of these suggestions can help out.

79569990