Page break is not working properly

[jack2jm]

how should I prevent it?? page break is not working properly. I had attached a screenshot here.

this is my HTML page - http://52.33.128.210/pdf-htmls/test6.html

I am generating this HTML using a dynamic section. so should i prevent a proper page break?

[phreniq]

CSS Page-breaks are a fickle beast. In order for this to work the way you expect, there are a few rules you need to follow with the structure of your HTML. First, break-* CSS rules will only work on block-level elements; display: block; (no inline-block, flex, or grid allowed). Second, and hopefully this is no longer a thing, don't use float. Lastly, if you are using anything other than position: relative; on the elements where you want breaks applied AND their parents, your mileage may vary.

I hit a similar issue and after learning the facts above was able to make things work as expected. Good luck!

[phreniq]

I ended up upgrading the dependencies to get latest Puppeteer v19. Now I can use the latest CSS break-* rules (break-inside: avoid; is what you want). There were only 2 or 3 breaking changes (Winston was one of them) to work thru. It was pretty painless. You will also need to include a .puppeteerrc.cjs file to define the cacheDirectory if you are deploying to Heroku.