Печать компонентов реакции, основной текст перетекает в верхний и нижний колонтитулы на дополнительной странице

#html #css #reactjs

Вопрос:

Я пытаюсь распечатать компонент React, который должен иметь верхний и нижний колонтитулы на каждой странице. Проблема, с которой я сталкиваюсь, заключается в том, что, когда основное содержимое достаточно велико, чтобы перейти на вторую страницу, оно попадает в нижний колонтитул и в заголовок на следующей странице. Я создал codesandbox, который показывает очень упрощенный пример того, о чем я здесь говорю: https://codesandbox.io/s/long-feather-r2mzh?file=/src/styles.css

Как я могу заставить основной текст не переполняться в нижнем колонтитуле и в верхнем колонтитуле на второй странице?

Это скриншот того, как это выглядит при попытке печати Основной текст переходит в нижний колонтитул и верхний колонтитул на дополнительной странице