If you open Chrome or Edge and visit a page with a flexbox layout, like this one [1], 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?
I had a similar issue where the height of the elements inside my flexbox was completely wrong in Puppeteer.
I was able to solve it by using display: inline-flex instead of display: flex