How to set positioning properly in PDF document? (Typeset.sh for laravel)

Question

Using typset.sh, I am able to generate PDF documents through blade. I am trying to set a fixed size بخق all images in the document plus organize them in a grid.

In this PDF, there are 10 images, 8 can be fit in 1 page, so the last two are moved to the second page. Correct however, the 2 before are rendering at the very end ignoring the margin rule i set for @page which is a bug I am trying to fix, please see screenshot:

Here is the HTML:

<section id="images">
            @foreach ($record->incident_images as $image)
                <div class="image">
                    <img src="{{ asset('storage/' . $image) }}" />
                </div>
            @endforeach
        </section>

Typset CSS code to setup the document:

@page {
            size: A4;
            margin: 10mm;
            /* bleed: 13mm; */

            @bottom-center {
                content: 'Page 'counter(page) ' of 'counter(pages);
            }
        }

This is the images css:

section#images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2mm;
            margin-top: 0; /* Adjust the top margin as needed */
            margin-bottom: 0; /* Adjust the bottom margin as needed */
        }

        .image {
            width: 100%;
            border: 1px solid black;
            break-inside: avoid; /* Ensure that each container stays together on a single page */
        }

        .image>img {
            width: 100%;
            height: 200vh; /* Set the image height to 50% of the viewport height */
            object-fit: cover;
        }

According to the documentation, I tried to using page breaks but the issue still isn't fixed:

Page break control
break-before and break-after: These properties can be used to specify where a page break should or should never occur before or after an element.
break-inside: This property can be used to prevent a page break from occurring within an element.
orphans and widows: These properties can be used to specify the minimum number of lines that must appear at the top or bottom of a page before a page break is allowed.

Answer 1

Looks like the img element outgrows the image container div.image element (you can see the border). That could mean that the layout engine does not cut it off as the div.image element does actually fit.

Why the height of 200vh ?

Might be an issue with the layout engine. You create a reproducible sample HTML and report it.