如何使用css固定页面大小和断开页面

我正在用A4纸打印我的html页面。我有css中的页面高度和宽度。页面高度和宽度正常工作，但决不破坏页面。我也经常使用分页符，以前使用分页符，但不工作。如何固定页面高度并将内容拆分为第二页。 请参见我的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>

第1页
第2页
第3页

但页面混乱请参见屏幕截图：-

请看屏幕截图，页面被另一个页面弄乱了