I'm working on an Angular project. I need to add printing support. The specific page that I need to print has, within it, a content div that is scrollable. When I print the page (using Chrome, Ctrl+P), the overflowing content (which can be scrolled through using the browser's scrollbar) is truncated in the printed page. There ends up with only one page printed. How could I make it so that overflowing content is printed as multiple pages as needed?
Also, I cannot add page breaks to the html since the content that overflows is data-driven.
Here is how my page renders in the browser: img_rendering_in_browser Notice the scroll bar in the web page; it correctly scrolls down to see the navigation instructions list.
And when printing, here is how it renders: img_printing_fail_1
I tried styling my content div with overflow: visible !important;, but it did not work. It helped a bit. In the print preview, it gets rid of the scroll bar (expected) but it does not display the content across multiple printed pages (not expected). Take a look:
img_printing_fail_2
In the end, it was due to a component higher up in the web page's structure with the style height: 100vh;. For a normal page, this worked; the page was globally not scrollable, and my sidebar's div was made scrollable, as well as the main content div, which could be scrolled within as well.
However, for printing, it is important that height of content is not limited or set in a hardcoded pixels value.
TLDR: Make sure the container's height is set to height: auto; with @media print { ... }
