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

Question

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.

Answer 1

Add overflow hidden property to the parent object. This way overflow is clipped, and the rest of the content will be invisible (in subject case height is 0 so remaining will also be 0).

#parent {   height: 0px;   overflow: hidden; }