Printing PDFs with Puppeteer/Playwright and Flexbox Layouts

Question

If you open Chrome or Edge and visit a page with a flexbox layout, like this one, and choose Print/Save as PDF, the PDF includes the flex elements in the proper location. However, if you use Playwright and the Page object's pdf() method, flex elements are missing.

I'm fairly certain this isn't a bug with Playwright, or Puppeteer, but instead is an issue with how the headless chromium creates the pdf. Or, hopefully, it's some kind of option I'm missing somewhere. Does anyone have experience creating PDFs of pages with flexbox layouts using Playwright?

Answer 1

我有一个类似的问题，我的 flexbox 中元素的高度在 Puppeteer 中是完全错误的。

I was able to solve it by using display: inline-flex instead of display: flex