page-break-inside: avoid;
does not seem to always work. It seems to take into account the height and positioning of container elements.
For example, inline-block
elements that are taller than the page will get clipped.
I was able to restore working page-break-inside: avoid;
functionality by identifying a container element with display: inline-block
and adding:
@media print {
.container { display: block; } /* this is key */
div, p, ..etc { page-break-inside: avoid; }
}
Hope this helps folks who complain that "page-break-inside does not work".