page-break-inside being ignored

Question

I am dynamically adding HTML from another page and styling it for print. However, page-break-inside: avoid;, when applied to my elements (any of them), does not seem to be taken into account when printing even though it shows up in the styles. I am using Chrome 31 on Windows

Here is a jsFiddle of the simplified version of my program (WARNING: It brings up the print preview after 3 seconds. To stop this simply comment out the setInterval at the bottom), This is the version where page-break-inside:avoid doesn't have any effect in print preview

The usual "fix" I've found, adding position:relative to the element and its parent, does not work in my case. Prefixing it (as a couple people suggested) doesn't seem to work either

I know page-break-inside: avoid; works in Chrome 31 with dynamically placed elements because I tested it out in a pseudo-version (WARNING: this also opens up print preview), but after spending hours removing code, playing around with the styles, and researching on the topic (most the posts are very outdated) I couldn't seem to get my more complex version working the same way

Thanks in advance for any insight!

Ferrell

page-break-inside:avoid doesnt work in Firefox just fyi – Firehouse

Answer 1

Change display property on your #fromTumblr ID from inline-block to block.

It seems logical that page break rules don't apply on inline elements and since that ID is for wrapper element that exceeds page size I guess thats the reason all your other rules are ignored.

Here's updated fiddle, tested on Chrome 31 and FF26 on Windows: http://jsfiddle.net/FSyT5/27/

Abdella

Wow, seems like a silly reason, but it's correct nonetheless. I suppose I didn't think about the inline-block on the parent element. Good work! – Ferrell

... also happened with my flex-box elements... I just need to get my overflow in order... or set overflow hidden, – Rinderpest