A box with overflow: auto or hidden and no height of its own grows with its
content, so on paper it has nothing to clip. It breaks between its lines like any other block, as it
does when a browser prints it, instead of being sliced with a line lost at every page edge.
1 var total = 0; 2 foreach (var line in invoice.Lines) 3 total += line.Quantity * line.UnitPrice; 4 // apply discounts and taxes per line 5 return total; 6 var total = 0; 7 foreach (var line in invoice.Lines) 8 total += line.Quantity * line.UnitPrice; 9 // apply discounts and taxes per line 10 return total; 11 var total = 0; 12 foreach (var line in invoice.Lines) 13 total += line.Quantity * line.UnitPrice; 14 // apply discounts and taxes per line 15 return total; 16 var total = 0; 17 foreach (var line in invoice.Lines) 18 total += line.Quantity * line.UnitPrice; 19 // apply discounts and taxes per line 20 return total; 21 var total = 0; 22 foreach (var line in invoice.Lines) 23 total += line.Quantity * line.UnitPrice; 24 // apply discounts and taxes per line 25 return total; 26 var total = 0; 27 foreach (var line in invoice.Lines) 28 total += line.Quantity * line.UnitPrice; 29 // apply discounts and taxes per line 30 return total; 31 var total = 0; 32 foreach (var line in invoice.Lines) 33 total += line.Quantity * line.UnitPrice; 34 // apply discounts and taxes per line
Every paragraph in this panel is drawn whole on one page or the next. The border and background are sliced at the page edge, as box-decoration-break: slice does for any block.
Because the panel has no height of its own, print treats it as an ordinary block: a page edge falls between two of its lines instead of slicing through one.
Add break-inside: avoid to keep a short panel together instead.
This is the case the clearfix idiom produces most often: a long, auto-height wrapper whose only job is to establish a new block formatting context, with ordinary paragraphs inside it.
Its height grows with its content, so there is nothing it can clip in the block axis, and the page edge simply falls between two of its lines.
The last paragraphs continue on the next page, still inside the same blue panel.
An overflow: auto box with a definite height is different. PeachPDF treats it as monolithic content, like an image, and never breaks it between its lines (browsers split such a box instead). Where it would straddle a page boundary, it is carried to the next page whole. A max-height alone does not do that: the box breaks between its lines under its cap, as the next showcase shows.
Everything above uses up most of this page, so the box below is left with less room than its own height. A box that scrolls has a fixed extent, so the page edge cannot be allowed to fall through it.
This box has overflow: auto and height: 170pt, so it is treated as monolithic: it moves whole to the next page when it does not fit where it starts, rather than breaking.
It starts too close to the foot of the page for all of its paragraphs, so the whole box, border and all, has moved to this page instead of leaving its first lines behind on the last one.
An auto-height box in the same place would have broken between two of these paragraphs.
To keep a short auto-height box together as well, give it break-inside: avoid.
End of document.