Longer page being misaligned on page and truncated at bottom

[karencfisher]

I am generating PDF files from contents within the "main" element. This way only the "printable" portion of the page is converted (excluding, for example, navigation elements also on the page). Generally, it works quite nicely. The issue I am seeing, however, is that with longer main portions of the page, the resultant PDF has a very large margin at the top of the page, and lower part of the content is truncated.

For example, this result is fine:

But with a longer content, this is happening:

Here is the code calling html2pdf:

downloadButton.addEventListener("click", () => {
    const main = document.getElementById("main");
    const titleField = document.getElementById("card-title");
    const title = titleField.querySelector("h1").innerHTML;
    const opt = {
        filename: `${title}.pdf`
    }
    html2pdf().set(opt).from(main).save();
});

If useful, here are the HTML (Jinja template) and CSS files for the page: https://github.com/karencfisher/recipe-share/blob/main/templates/recipe-card.html https://github.com/karencfisher/recipe-share/blob/main/static/recipe-card.css