Avoid page break between heading and first list item

I have an HTML document, and I'd like to ensure that when printed, page breaks never appear immediately after a heading.

In an ideal world, this would be as easy as setting .heading {page-break-after: avoid;}, but most browsers do not support page-break-after: avoid (or page-break-before: avoid), only page-break-inside: avoid.

When a stand-alone element like p follows my heading, I can wrap the heading and the paragraph in a <div class="nobreak">, and avoid page breaks inside the .nobreak elements.

But sometimes, a long list follows the heading:

<h1>A list of things</h1>
<ol>
  <li>This is the first thing.</li>
  <li>This is the next thing.</li>
  ...
  <li>Many things later, we reach the end.</li>
</ol>

I can wrap the h1 and the ol both in a div.nobreak, but this is too strict: it prevents page breaks from occurring at any point during the list, when really all I care about is preventing a break right before the first li.

For obvious reasons (the presence of the ol tag), I cannot wrap just the h1 and first li in a surrounding element.

Any ideas on how to achieve the desired effect here?