mobile menu automatically opening on resize

There are, however, multiple workarounds that each come with a different set of advantages and disadvantages, and in most use cases at least one of them will get the job done in an acceptable manner. There’s no one solution that achieves the desired effect without downsides.

If you were hoping I had a magical, complete solution to this problem, I’m sorry to disappoint you. In this article, I mostly speak in terms of height for simplicity, but everything here also applies to width.

But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content. Percentages, pixel values, any absolute units work as expected. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. It snaps between the two sizes as if transition had never been set. You try it out, and… the height doesn’t transition.

You’ve created a collapsed CSS class that applies height: 0. You’ve set transition: height 0.2s ease-out. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent.

Mobile menu automatically opening on resize