Printing HTML always overflow to next page

[horkimsereirith]

Problem

When printing html with fixed width and height to match with A4 paper size, result seems to always overflow to next page.

<div
  id="paper"
  class="main"
  :style="{
    paddingLeft: '10px',
    paddingRight: '10px',
    paddingTop: '10px',
    paddingBottom: '10px',
    width: '29.7cm',
    width: '21cm',
    display: 'block',
    border: '1px solid blue',
    background: 'white'
  }"
>
  <h1 style="color:red">YOYO</h1>
  <div v-for="(i, index) in 15" :key="index">
    hiii {{ index + 1 }}
  </div>
  <slot />
</div>

this.$printJs({
  printable: 'paper',
  type: 'html',
  maxWidth: 'auto',
  style: '@media print { @page { size: A4 landscape } }',
  targetStyles: ['*']
})

Print result

[semvis123]

Have you managed to fix the issue? I'm struggling with a similar problem.