Forced print doesn't automatically break even with properties

Question

I'm doing a page in Angular which prints some data stored in a variable.

I followed this guide : https://medium.com/@Idan_Co/angular-print-service-290651c721f9

The content I set is received from the API as a big HTML string I am setting as INNER HTML into a div.

The problem I'm encountering is that my content doesn't automatically break page, even with the property :

page-break-inside: auto;

As you can see here :

I want to have on each page a header, the footer and the content which has been "broken" from the previous page. It seems like the content gets hidden and it only displays the first page.

This is my layout page :

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <router-outlet></router-outlet>
</div>

<div class="footer">
  <h2 class="footer-title">Footer</h2>
</div>

and this is my content page

<div [innerHTML]="content"></div>

Does someone know how I could force the pages to break ?

Thanks !

Answer 1

Fixed it by adding in my styles.css :

  * { overflow: visible !important; min-height: max-content !important; max-height: max-content !important; }