Animate to height: auto

#interpolate-sizeinterpolate-size

Smoothly transition intrinsic sizing with interpolate-size.

live_demo

code

.expand-wrapper {
  interpolate-size: allow-keywords;
  width: 100%;
}

.expand-content {
  height: 0;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-wrapper:has(input:checked) .expand-content {
  height: auto;
}