page break is not working!!! await page.emulateMediaType('screen')

I am attempting to create a PDF of my screen using

    const browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    })
    console.log('browser has been opened')
    const page = await browser.newPage()
    page.setViewport({width: 1000, height: 1056})
    await page.waitFor(1000)
    await page.emulateMediaType('screen')
    await page.waitFor(5000)
    console.log('about to create PDF - standby')
    const pdf = await page.pdf({
      format: 'Letter',
      printBackground: true,
      path: MY PATH
    })
    console.log('pdf created')
    await browser.close()
    console.log('browser closed')
  }

Locally… my PDF is returned to my browser with the proper sizing and formatting… however. when running in production… my formatting / margins are off…

This creates awkward page breaks in the middle of my content and is not suitable for my client!

I am using "puppeteer": "^2.00.0" and node version 8.16.2

I am using heroku as my server.

Thanks in advance for your help!!!

[SeungjongHan]

You should remove flexbox style in parent element not the element itself.

<div style={{display: 'flex'}}> ---> you should change this one to non-flexbox style
  <div style={{pageBreakAfter: 'always'}}/>
  <div/>
<div/>

[radonichn]

As for me, the problem was, that the .page was a flexbox. Check it out.