Children of element overflow?

I’m trying to build a drop down from scratch - to better understand them. I’m expecting an element set to hide overflow to completely be hidden until triggered. But that’s not happening.

Here is my site Read-Only:

So the reason why you have an excess on the animation is because height and padding are two different things.

Setting an element’s height to 0 will not affect the padding of that element, like how a change in margin won’t affect a change in padding.

To make this custom dropdown, you should put padding on the content/insides instead of the container.

Thanks Pendragon. I’d been giving margin to every component as well as a border to keep track of each.