When printing a web page, how to make overflowing content print on multiple pages?

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

Continue reading...