Issue with Two-Column Block Overflow in PDF Printing when render with

Question

When attempting to use a two-column block (whether it's flex, grid, or other), PDF behaves strangely when either of the columns does not fit on the current page. Instead of simply moving the column that doesn't fit and leaving the other in its normal flow, the second column is pushed to the next page.

Here's how it looks in practice:

Here is my code:
jsx part:

 <div className={clsx(styles.techTablesWrapper)}>
        <div className={styles.left}>
          {[
            1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
            26, 27, 28, 29,
          ].map((el) => {
            return <div>Some text left Some text left Some text left33</div>
          })}
        </div>
        <div className={styles.right}>
          {[
            1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
            26, 27, 28, 29,
          ].map((el) => {
            return <div>Some text left Some text left Some text left33</div>
          })}
        </div>
   </div>

css part:

.techTablesWrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .left {
      border: 1px solid red;
      grid-column: 1 / 2;
      grid-row-start: 1;
      height: 100%;
    }

    .right {
      border: 1px solid green;
      grid-column: 2 / 2;
      grid-row-start: 1;
      height: 100%;
    }
  }

Expected Result: I want each of the columns to flow properly and occupy only the space allocated to it.