I have multiple blocks of content I want to print them while choosing when to make my page breaks. I want to avoid breaks inside my blocks obviously, but I also want my title blocks not to break just before my contents.
For example, I have 3 divs and I want the second and the third to be on the same page while also avoiding breaks inside.
I tried:
.first {
height: 20cm;
border: solid red 5pt;
}
.second {
height: 2cm;
border: solid blue 5pt;
break-after: avoid;
}
.third {
height: 30cm;
border: solid green 5pt;
break-inside: avoid;
}<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</body>This works exactly as expected on chrome. When I print, the first div is on page 1, the second and third are on page 2, and the end of the third on page 3.
On firefox, though, I got the first and second on page 1, the third div overlapping page 2 and 3. Whatever I try, break-inside is always putting the third div on the next page, ignoring break-after.
The only workaround I've found is removing it from the third div and grouping div 2 and 3 together in another div with break-inside: avoid; but I'd rather avoid that if possible.