printToFileAsync Not Respecting CSS Page Breaks

Expo SDK
3

Apologies, that was the wrong link. Was meant to be this one that I was referring to:

The HTML I am using is the following, just a rough template that I was looking at getting working before I connected it up with my app.

<!doctype html>
<html class="no-js" lang="en" style="margin:0; padding:0; display:flex; width: 595px;">

<head>
    <meta charset="utf-8">
    <title>Building Inspection - 123 Test St</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<style>
    @page {
        margin: 0;
    }

    @media print {
        footer {
            position: fixed;
            bottom: 2px;
        }
    }
</style>

<body
    style="position:relative; margin:0; padding:0; font:10pt Avenir Next, 'Times New Roman', Times, serif; line-height: 1.3; color: #2D3748;line-height: 1.3; background: #fff !important; padding:20px;">

    <!-- Page -->
    <div style="page-break-after: always;">
    

        <!-- Page 1 - General Overview -->
        <div style="z-index: 1;height:100%; display:flex; flex-direction:column;">
            <div>
                <img width="100" style="margin: 10px 0 0 10px" src="./assets/logo_splash.svg" />
            </div>
            <div style="margin-top:220px">

                <p
                    style="font-size: 24pt; font-weight:bold; margin:0; padding:0; width: 350px; margin-left: 220px; margin-bottom: 40px">
                    Building Inspection Report
                </p>

                <p
                    style="font-size:8pt; font-weight:bold; margin:0; padding:0; margin-left: 220px;margin-bottom:5px; margin-top:10px;">
                    Inspection Address</p>
                <p style="font-size:10pt;margin:0; padding:0; margin-left: 220px;">123 Test St, Albury, NSW, 2640</p>

                <p
                    style="font-size:8pt; font-weight:bold; margin:0; padding:0; margin-left: 220px;margin-bottom:5px; margin-top:10px;">
                    Inspected By:</p>
                <p style="font-size:10pt; margin:0; padding:0; margin-left: 220px;">John Smith
                </p>

                <p
                    style="font-size:8pt; font-weight:bold; margin:0; padding:0; margin-left: 220px;margin-bottom:5px; margin-top:10px;">
                    Prepared For:</p>
                <p style=" font-size:10pt; margin:0; padding:0; margin-left: 220px;">Annie Oakley</p>

            </div>
            <div style="text-align: center; margin-top: 150px">
                <p style="font-size:8pt; font-weight:bold; margin:0; padding:0">Inspection Date</p>
                <p style="font-size:10pt; margin:0; padding:0">12th November 2019</p>
            </div>

        </div>

    </div>

    <!-- Page -->
    <div style="page-break-after: always;">


        <div class="display:flex; flex-direction:column;">
            <p style="font-size: 18pt;font-weight:bold; margin:30px 0; padding:0; page-break-before: always;">Section
            </p>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>


            <p style="font-size: 18pt;font-weight:bold; margin:30px 0; padding:0; page-break-before: always;">Section
            </p>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                            Question Title Question Title Question Title</p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2, Question 3, Question 4</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>

            <!-- Question Row -->
            <div style="border: 1px solid #718096; padding: 5px 15px; margin: 2px 0; page-break-inside: avoid;">
                <div style="display: flex; align-items: center;">
                    <div style="display: flex; align-items: center; flex: 1">
                        <div style="width:20px; height: 20px;">
                            <svg width="20" height="20" viewBox="0 0 30 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="15" fill="#68D391" />
                                <path
                                    d="M22.8515 10.5668L21.4321 9.14737C21.2356 8.95088 20.9191 8.95088 20.7226 9.14737L13.4655 16.8089L9.30575 12.6472C9.10726 12.4487 8.78528 12.4487 8.58679 12.6472L7.14887 14.0861C6.95038 14.2841 6.95038 14.6061 7.14887 14.8051L13.065 20.8587C13.1795 20.9737 13.335 21.0132 13.4845 20.9937C13.639 21.0167 13.8 20.9777 13.9185 20.8587L22.8515 11.2767C23.0475 11.0808 23.0475 10.7628 22.8515 10.5668Z"
                                    fill="#276749" />
                            </svg>

                        </div>
                        <p style="max-width:250px; font-weight: bold; font-size: 12pt; margin-left: 10px">Question Title
                        </p>
                    </div>
                    <p style="max-width: 220px">Question Answer 1, Question Answer 2</p>
                </div>
                <hr
                    style="display: block;height: 1px;background: transparent;width: 100%;border: none;border-top: solid 1px #E2E8F0;" />
                <p style="font-style:italic; color: #718096">Comments here</p>
            </div>


        </div>

        <footer>
            <p style="text-align: center; font-size:7pt; margin: 20px 0 0 -30px; padding: 0;">This report was completed
                on
                12/11/2019 by
                John Smith.</p>
        </footer>
</body>

</html>

Then I was using the following to render it.

let pdf = await Print.printToFileAsync({
            html: '<html here />,
            width: 595,
            height: 842
        })

And this was the output that I was getting, I was hoping to have the outlined divs with each question flow onto a new page without being slip as they are:

25%20am
25%20am807×1690 138 KB