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

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