Why does this print on two pages (of which one is blank)?

I am trying to have HTML generate a PDF that fits exactly one page.

I would expect this to do the job:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
@page {
    size: A4 landscape;
    margin: 0mm; /* Adjust margins as needed */
}

body, html {
    margin:  0mm;
    padding: 0mm;
}

.container {
    display: grid;
    
    grid-template-columns: repeat(4, 1fr); /* 4 columns with equal width */

    grid-gap: 10px; /* Adjust the gap between grid items */

    margin: 0 auto; /* Center the grid container and add some margin */
    padding: 0px; /* Add padding inside the grid container */

    width: calc(841pt - 2px);
    height: calc(594pt - 2px);
}

.item {
    background-color: lightgrey;

    font-size: 18px; /* Example font size */
    text-align: center; /* Center align text */

    margin:  0px;
    padding: 0px;

    height: 100%;
}
/*
this is the bit that handles the margin inside the
grid container
*/
.item div {
    padding: 2em;
    text-align: left;
    overflow-y: hidden;

    height: 100%;

}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">
      <div>
Aspernatur ut consequuntur voluptatem ipsam consectetur. Minima aut
dolorem delectus voluptatem corporis numquam. In occaecati quis
consectetur. Eum eligendi ab nulla beatae inventore et. Eveniet
perferendis mollitia consequatur.
      </div>
    </div>
    <div class="item">
      <div>
Magnam cumque dolores qui tenetur consequuntur perferendis. Eum
temporibus quis eum voluptate quia id eaque totam. Veritatis eveniet et
occaecati fuga aut ut eveniet.
      </div>
</div>
    <div class="item">
      <div>
Facere cumque eum consequatur earum incidunt quia accusantium suscipit.
Eum placeat mollitia quasi quidem distinctio aut. Sunt porro aliquam
possimus necessitatibus odio culpa eum rerum.
      </div>
    </div>
    <div class="item">
      <div>
Amet eaque expedita repellendus quo enim nemo dolores consectetur.
Recusandae eos necessitatibus qui qui ipsam voluptatem ipsa quam. Qui
non ducimus laboriosam suscipit.
cumque sapiente et.
      </div>
    </div>
    <div class="item">
      <div>
Maiores eligendi deserunt qui autem consequuntur ducimus. Quia dolores
dolores porro sed et et laboriosam autem. Vitae rem cupiditate in et
minima sit perferendis.
      </div>
    </div>
    <div class="item">
      <div>
    Magnam cumque dolores qui tenetur consequuntur perferendis. Eum
temporibus quis eum voluptate quia id eaque totam. Veritatis eveniet et
occaecati fuga aut ut eveniet.
    </div>
</div>
    <div class="item">
      <div>
Facere cumque eum consequatur earum incidunt quia accusantium suscipit.
Eum placeat mollitia quasi quidem distinctio aut. Sunt porro aliquam
possimus necessitatibus odio culpa eum rerum.
      </div>
    </div>
    <div class="item">
      <div>
Amet eaque expedita repellendus quo enim nemo dolores consectetur.
Recusandae eos necessitatibus qui qui ipsam voluptatem ipsa quam. Qui
non ducimus laboriosam suscipit.
cumque sapiente et.
      </div>
    </div>
  </div>
</body>
</html>

but when I convert it to PDF like this:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless=new --print-to-pdf-no-header --no-pdf-header-footer --print-to-pdf-no-header --print-to-pdf=empty.pdf empty.html

I get two pages, of which one is blank.

Why, why, why?

Solution

height: 100%; in .item div should be removed. It makes the div in .item taller than .item, out of range for this page.

.item div {
    padding: 2em;
    text-align: left;
    overflow-y: hidden;

    /* height: 100%; */
}