I’m trying to make a clone of this demo, but it’s not working for me.

Here’s what I have so far:

CSS:

.container {
  height: 100px;
  border: 1px solid #000;
  contain: strict;
  contain-intrinsic-height: 100px;
  overflow: auto;
}
tr {
  height: 21px;
  contain: strict;
  contain-intrinsic-height: auto 21px;
  content-visibility: auto;
}

HTML:

<div class="container">
  <table>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
    <tr><td>Cell</td></tr>
  </table>
</div>

Codepen: https://codepen.io/Jester-Lee/pen/JjqrbaY

How come it doesn’t appear to be working? In the stackblitz demo, the rows that are outside of the viewable area have a “Descendants are skipped due to content-visibility” tooltip when you hover over them in the inspector (in Edge), but in my demo I get no such tooltip, which is why I think my demo isn’t working as expected. What am I doing wrong? I’m just trying to wrap my head around this new CSS property.