How to get `page-break-inside: avoid` to work nicely with `flex-wrap: wrap`
I had the same problem and the only way to overcome it was to use flexbox without flexbox.I did that using the following rules:
.container { display: table;}.item { display: inline-block;}You can find more information here: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Played around a bit with your issue. If you are primarily concerned with printing problem only then this should help:
Flexbox class is still applied but in case of printing its display property is overridden with:
.flexbox { display: block;}This made it respect the page break policy.Check the print preview http://jsfiddle.net/nSE3P/3/show
A little late to this discussion but thought I'd share what I did to have a similar flex-wrap type style for print.
Leveraging what Dimitris Makris had previously added, I also went ahead and added the following bit to each .item to try to preserve height.
.item:nth-child(5n+1){ /* Change this to your liking. (wrap after nth item) */ clear: left;}