Flex Items Do Not Overflow To Next Page In Printed PDF (Paged.js)

Question

I am using paged.js to create a PDF from a website. I am trying to display 2 pieces of text next to each other, and I want them to both be side by side and whenever there is a page break, I want the contents on both sides simply to overflow to the next page.

My HTML & CSS are very simple:

CSS:

.wrapper {
        background-color: lightgray;
        display: flex;
      }

      .child1 {
        background-color: yellow;
        width: 50%;
      }

      .child2 {
        background-color: green;
        width: 50%;
      }

HTML:

<div class="wrapper">
        <p class="child1">
          Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi
          cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit
          diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat
          bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo
          lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada
          ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci
          sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem
          cursus, vel feugiat nunc fringilla.
        </p>

        <p class="child2">
          Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum.
          Donec non elementum purus, et porta eros. Cras ullamcorper mi eu
          semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus
          felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non.
          Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Vestibulum id felis at nulla mollis
          bibendum.
        </p>
      </div>

Here is what it looks like, without any page breaks:

However: When there is a page break, the left column will start on page 1 and flow over, but the right column will only start on page 2. I do not want this:

In the image above, there is a page break and the green box only starts on the next page. But I want both boxes to begin on the same page and then roll over to the next one.

But I do not understand why this is happening?

I am using the paged.js inline script (not the cli), and I am using Chrome to simply save the website as PDF.