break-inside: avoid doesn't work for basic example

Question

I'm using Chrome v99 and a pretty basic usage of break-inside: avoid - but it does nothing.

Moderator: This is not a duplicate of this post and the 1 answer there isn't helpful.

My objective is to disallow the contents of all these divs from splitting at page breaks:

<div class="opt">

Here is my inline css:

<style media="screen" type="text/css">
    @media print {
        div.opt, table {
            break-inside: avoid !important;
        }
    }
</style>

The full html is a bit lengthy but you can view the entirety here.

Simply press CTRL+P and observe that it page-breaks in the middle of divs with a class of opt - but it shouldn't because I'm using break-inside: avoid.

The example I linked to is very short and contrived, but my real scenario has many more sections and is dynamic, pulling from a database. So there's no way to know where the page is going to break relative to the divs. I just want the contents within those divs with that class to always stay together on the same page and never split across a page break. No div contents ever exceed a page, they are even shorter than my example.

Help, what am I doing wrong?

Answer 1

You have media=screen in the style tag... Your print styles will only load when you're using a screen and not a printer

<style media="print" type="text/css">
  div.opt, table {
    break-inside: avoid !important;
  }
</style>

When you fix it though it still seems to wrap onto multiple pages uglier but at least now you can play around with what print styles work