puppeteer: [Bug]: Page break within table doesn't work

Unfortunately, we need a complete repro (HTML/CSS/JS files of the page + a Puppeteer script) with a minimal example reproducing the issue. The issue is likely in the browser implementation (as Puppeteer just asks the browser for PDFs) so we will need the repro to file the bug upstream at crbug.com. We don’t have capacity to reverse engineer the React snippets to get a working repro. If you could provide the repro, it’d be great.

@OrKoN I have a lot of fields in the page that i’m printing.

I’m actually printing a view with a lot of fields. It has display:flex in the parent.

Here are my failed attempts to fix the page break:

• I tried Changing the display :flex to display :block / inline since i read online that flex /grid have an issue with page breaks
• I tried changing the view port based on page context

Script to print the pdf:

 const browser = await puppeteer.launch({
    ignoreHTTPSErrors: true,
    headless: true,
    args: puppeteerConstants.args,
    defaultViewport: puppeteerConstants.viewport,
  });

const pdfTitle = guid();
  const pdfName = opts.fileName || pdfTitle;
  const date = new Date();
  const day = date.getDay();
  const month = date.getMonth();
  const year = date.getYear();
  const pdfFilePath = path.resolve(TEMP_PATH, `${pdfTitle}.pdf`);

  const pdfOptions = {
    path: pdfFilePath,
    format: 'Letter',
    preferCSSPageSize: false,
    scale: 1,
    displayHeaderFooter: true,
    margin: { top: 20, bottom: 60 },
    headerTemplate: "<div/>",
    footerTemplate: "<div style=\"text-align: right;width: 297mm;font-size: 8px;\"><span style=\"margin-right: 1cm\"><span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></span></div>"
  };

 await page.pdf(pdfOptions);

Output:

What i need to achieve:

• I want a way to prevent the table / other fields from being cut due to page break

@sayo96 could you please share the HTML table you had used and the script you used to print to PDF?