Animating height with the calc-size() function

For as long as I can remember, one thing that has infuriated developers is the lack of a simple means of animating an element to its native height. It’s a common requirement where you want to animate the opening and closing of a drawer with variable content. Finally, there looks to be a simple solution on the horizon that does not require JavaScript. The only downside is that, as I write this, it is only supported in Chrome and Edge. As it is still experimental, and the syntax is likely to change, we won’t cover it in great depth here, but the short version is that it should soon be able to animate the opening/closing of something simply like this:

div {
  transition: .3s;
  height: 40px;
  overflow: clip;
}
div:hover {
  height: calc-size(auto, size);
}

With the calc-size function, auto is the intrinsic size (you might use min-content, max-content, or fit-content instead), and then size is the result of that, which...