print stylesheet, one page prints and cuts off remaining text

just setting display: inline solved my same problem.

Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm

I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;. My modal was originally position: fixed;.

For me setting overflow:visible; for body solved the problem.

body {
        overflow: visible;
}

I've had this issue to. In my case, this was due to an

position: fixed;

Element. I changed this to

@media print{
   position: relative;
}

Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.

If the items on the page are getting partially cut off, adding an :after element of 10px did it for me.

<div class="print-row">
  <div class="print-items">
    <div class="print-item"></div>
    <div class="print-item"></div>
    <div class="print-item"></div>
  </div>
</div>

.print-items {
  page-break-before: auto;
  page-break-after: auto;
  page-break-inside: avoid;
}

.print-item {
  break-inside: avoid;
}

.print-item:after {
  position: relative;
  display: block;   
  min-width: 100%;
  height: 10px;
  width: 100%;
  content: "";
}

for me, the issue was this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

which putting any value other than 1 for initial scale solves my problem:

<meta name="viewport" content="width=device-width, initial-scale=0.8"/>