如何使用css修复页面大小和中断页面

Question

我在A4纸上打印我的html页面。我有页面高度和css中的widht。页面高度和宽度工作正常但从不破坏页面。我还使用了page-break-always，page-break-before但没有工作。如何修复页面高度并将内容分解为第二页。 看我的css： -

@page 
    {
        size:  A4;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */     
    }    

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {       
        margin: 10mm 10mm 10mm 10mm; /* margin you want for the content */
    }

@media print {
  .pr-page { 
    margin: 2mm;
    width: 210mm;
    height: 297mm;
    border:1px solid #ff0000;
    page-break-after:always !important;
    position:relative;
    display:table;    
  }    
  .pagebreak { page-break-inside: avoid; page-break-before: always;position:relative;display:block; }

  } 

HTML： -

<div class="pr-page" >page 1</div>
<div class="pagebreak"></div>   
<div class="pr-page">page 2</div>
<div class="pagebreak"></div>   
<div class="pr-page">page 3</div>

但页面搞砸了，请看屏幕截图： -

看到屏幕截图页面被搞砸到另一页面。