CSS - Set parent's height to 0 but child div still show

I want to make a simple animation to show and hide a component.


#parent {
height: 0px;
}

<div id="parent">
<div id="child">This is some content</div>
</div>

When I set parent div height to 0, I expect the child div also not visible, but the child still showing. I want to make it disappear when parent height set to 0.

What is the problem here and what I'm I doing wrong? Thank you very much.

Continue reading...