page-break-after not working in flexboxes

Question

This doesn\'t produce the expected result inside print preview in Firefox:

  side



  
 page 1 
  


        
      

Answer 1

Firefox doesn't do page-break correctly even with float elements, so I'm not surprised that flex doesn't work. Source: CSS Page-Break Not Working in all Browsers

In general, Firefox page-break support isn't great. See: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

If you need consistent, cross-browser printing results, the answer is almost always to use server-side PDF generation, with a tool like wkhtmltopdf or princexml.