Animate height from 0 to auto

Limited support Reference ↗

Enable transitions between a numeric size and an intrinsic size such as auto. This panel opens to its content’s natural height without measuring it in JavaScript.

<style>
  .panel {
    interpolate-size: allow-keywords;
    block-size: 0;
    overflow: clip;
    transition: block-size .25s ease;
  }
  .panel.is-open { block-size: auto; }
  .panel > p { margin: 0; padding: 1rem; }

  @media (prefers-reduced-motion: reduce) {
    .panel { transition: none; }
  }
</style>

<button type="button" id="toggle" aria-expanded="false"
  aria-controls="panel">Toggle details</button>
<div id="panel" class="panel" inert>
  <p>Content with a natural height. <a href="/about">About</a></p>
</div>

<script>
  const toggle = document.querySelector('#toggle');
  const panel = document.querySelector('#panel');
  toggle.addEventListener('click', () => {
    const open = panel.classList.toggle('is-open');
    toggle.setAttribute('aria-expanded', String(open));
    panel.inert = !open;
  });
</script>

interpolate-size: allow-keywords allows interpolation when one endpoint is a numeric length or percentage and the other is an intrinsic size. It does not enable interpolation between any two intrinsic keywords.

The property is inherited; placing it on the panel limits its scope compared with setting it on :root. The closed panel is inert, keeping its clipped content out of keyboard navigation and the accessibility tree. The button updates aria-expanded.

Support remains limited. Browsers without this property still open and close the panel, with the size changing immediately. Reduced-motion preferences disable the animation.