When the content extends beyond the size of the sheet, the header and footer end up overlapping

I ran into an issue while designing a sheet for printing. The problem is that the content overlaps with the footer, and on the second page, it overlaps with the header. If you've reviewed my code, you'll see that I've made adjustments, but the issue persists.

header and footer position fixed In order for them to appear on every page

    header,    footer {        display: flex !important;        position: fixed !important;        left: 0 !important;        width: inherit !important;        height: 80px !important;    }

@page

    width: 210mm !important;    height: 297mm !important;    size: A4;    font-family: 'Famba Bold';    flex-direction: column;    justify-content: space-between;    margin: 0px 10px 0px 10px;

You can access the project from here github and netlify

I tried using js as an if condition for the main div, offsetHeight, but it did not work because I have more than one header and footer.

I used Flex to cut the div into groups, but the problem is that I cannot because there is text.

I want get report without any conflict between the contents and the footer and header