Page-break-inside:avoid not working

Question

I have a print stylesheet for my (Wordpress) site, and I want images to print on a single page rather than being split across pages. In some cases, even lines of text are being split across pages. I've included img {page-break: avoid;) in my print stylesheet, but no luck. I've found some previous answers but they're kind of old.

Is there a reliable way to print a moderately-sized image on a single page rather than splitting it across pages? Why are lines of text breaking across pages?

Site: http://74.220.217.211/housing-developments/grafton-townhomes/

Related posts:

• Print styles: How to ensure image doesn't span a page break

• What are most useful media="print" specfic ,cross browser compatible css properties?

• What is the correct way to do the CSS to avoid page breaks?

• page-break-inside doesn't work in Chrome?
• Work around for page-break-inside:avoid

Answer 1

It could be that the parent element of the img element has style:

display: flex

Then the break-inside doesn’t work.

For example if you change parent element display style to:

display: block

Then it will work.