Parent DIV height:0px but child element still shows - html

Question

While looking for a way to implement navbar drop down menu (similar to accordion) I came upon this youtube video which uses custom component and manipulating max-height of card-content element to achieve the desired effect.
HTML:
<ion-card>
<ion-card-title text-center color="primary" (click)="toggle()"></ion-card-title>
<ion-card-content #cc>
<p>Hello World!</p>
</ion-card-content>
</ion-card>
CSS:
.card-content{
max-height: 0px;
}
TS:
toggled = false;
#ViewChild("cc") cc: any;
toggle() {
if (this.toggled) {
this.renderer.setStyle(this.cc.nativeElement, "max-height", "0px");
} else {
this.renderer.setStyle(this.cc.nativeElement, "max-height", "500px");
}
this.toggled = !this.toggled;
}
All was working fine while following the video from start to finish.
However what I wanted was a drop down menu from navbar so I decided to edit part of his code to...
#cc{
max-height: 0px;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">
<p>Hello World!</p>
</div>
But it is not working as expected. When div is (0px) i can still see the elements that it contains, in this case it's "Hello World!"
Am I doing something wrong here, or does it only work specifically with ion-cards?

Answer 1

Just add overflow: hidden; to the parent:
#cc{
max-height: 0px;
overflow: hidden;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">
<p>Hello World!</p>
</div>

Answer 2

use overflow: hidden;
#cc{
max-height: 0px;
overflow: hidden;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">
<p>Hello World!</p>
</div>