Page Breaks for Print Preview Broken by display: flex - Simple CSS Fix

[slundberg]

Page-breaks are not being respected under Chrome or Safari (OS X 10.9) when printing. I am running IPython master (1 day old) and using IJulia, the issue is CSS based though.

page-break-inside: avoid is used to stop figures and code from being cut up across printed pages in IPython. But apparently from my tests Chrome and Safari (and perhaps other browsers) do not like it inside of display: flex elements.

Adding the following CSS code after all the style information in an exported HTML version of the notebook fixes the issue (each of these elements used to be display: flex):

@media print {
    div.cell{ display: block } 
    div.output_wrapper { display: block }
    div.output { display: block }
}

I didn't see any issues from changing the display attributes, other than fixing page break problems across figures and code snippets. Perhaps there are other components I am not using that need display: flex when printing.

This might be related to #5024, and should be a simple fix for someone who knows how the "Print Preview" HTML page gets generated. Even if there are side effects for some components I don't know about they probably are not worse than plots cut across two pages.

[jdfreder]

@ellisonbg @Carreau what is the reasoning behind using flex boxes with the static nbconvert output? May we just replace the flexible box model with the standard box model as proposed in this issue?

[Carreau]

The reasoning is to keep the css with as few differences as possible with live app, and I have no objection to add css specifically for print.

[WolfgangFahl]

Why is this closed? I don't see a well defined and working page-break solution.

[frenkel]

@WolfgangFahl Because #5172 got merged and should solve this.