CODEWITHSUNDEEP
htmlcssangular
imrhung
imrhung

Reputation: 864

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.

Upvotes: 36

Views: 15798

Answers (2)

Adeeb basheer
Adeeb basheer

Reputation: 1490

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;
}

Upvotes: 60

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

After add overflow: hidden whatever is written in a child DOM, it will be disappear

#parent {
  height: 0px;
  overflow: hidden;
}
<div id="parent">
  <div id="child">
    This is some content..
    This is some content..
    This is some content..
  </div>
</div>

Upvotes: 10

Related Questions