Принудительная печать автоматически не нарушает даже свойства

Question

Я делаю страницу в Angular, которая печатает некоторые данные, хранящиеся в переменной.

Я следовал этому руководству: https://medium.com/@Idan_Co / angular -print-service-290651c721f9

Контент, который я устанавливаю, поступает из API в виде большой строки HTML, которую я задаю как INNER HTML в div.

Проблема, с которой я сталкиваюсь, заключается в том, что мое содержимое не разрывает страницу автоматически даже при наличии свойства:

page-break-inside: auto;

Как вы можете видеть здесь:

Я хочу, чтобы на каждой странице были заголовок, нижний колонтитул и контент, который был «сломан» с предыдущей страницы. Кажется, что содержимое скрыто и отображается только первая страница.

Это моя страница макета:

<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>

и это моя страница контента

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

Кто-нибудь знает, как я мог заставить страницы ломаться?

Спасибо!

Answer 1

Исправлено добавлением в мои стили. css:

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