DomPDF break point problem

Hello, I currently have the problem that my maps my 9th map is displayed on two pages although there is still enough space on the first page. Does anyone have a suitable solution to the problem?

I tried anything: page-break-inside, page-break-before, page-break after. Anything does not work.

Picture: https://drive.google.com/drive/my-drive

index.blade snipped:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    @yield('third_party_stylesheets')

    @stack('page_css')
    <style>
        .layout{
            width: 100%;
            height: 100%;
            /*margin: 11mm 20mm;*/
            margin-top: 10mm;
            margin-bottom: 0;
            margin-left: 25px;
        }
        .box {
            /*border: 1px dashed black;*/
            display: inline-block;
            width: 87mm;
            margin-top: -15px;
            margin-bottom: 0px;
            margin-left: -10px;
            margin-right: -1px;;
            padding-top: 15px;
        }
        p {
            text-align: right;
        }

        .card{
            width: 85mm;
            height: 55mm;
            border: 1px solid black;

        .pb {
            page-break-inside: always;
        }
    </style>
</head>
<body class="layout">
@for( $i = 0; $i < 10 ; $i++)    
     <div class="box">
         <div class="card">
             ....
         </div>
     </div>

    @if($i % 2)
        <br>
    @endif

    @if($i % 10 == 9)
        <p class="pb" style="display: none;"></p>
    @endif
@endfor
</body>
</html>

Please or to participate in this conversation.