absolute position div height not increasing

Question

in the following code, I am trying to increase the height of the .dropdown (grey colored one) that is placed below its parent div content-small (green colored one). I noticed that when I try to increase the height beyond 50px, nothing happens. I don't know why. Here I am trying to practice dropdown menu.

*{
    box-sizing:border-box;
}

a {
	color: rgba(0,0,0,1);
	text-decoration: none;		
}

a:hover {
	color: rgba(0,0,255,1);	
}

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(0,0,0,1);
	padding: 0px;
    }



.wrapper {
	height: 600px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	background-color: rgba(204,204,204,1);
	margin-right: auto;
	position: relative;
	padding: 0px;
	margin-top: 0px;
}


.content {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	max-height: 200px;
	max-width: 600px;
	background-color: #FFF;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	left: 0px;
	right: 0px;
	font-size: 32px;
	text-align: center;
	border: 3px solid rgba(0,0,0,1);
	border-radius: 15px 15px 0px 0px;
	width: 100%;
}

.content-small {
	max-width: 100px;
	height: 100%;
	max-height: 50px;
	background-color: rgba(0,255,204,1);
	position: relative;
	margin-right: auto;
	margin-left: auto;
	border: 3px solid rgba(0,0,0,1);
	top: 5px;
}

.dropdown {
	box-sizing: border-box;
	width: 100px;
	max-width: 100px;
	height: 100%;
	max-height: 50px;
	background-color: rgba(214,214,214,1);
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	border: 3px solid rgba(255,0,0,1);
	top: 47px;
	left: -3px;
}
	

<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">
</div>
</div>


</div>

</div>

Answer 1

It's inheriting the max-height attribute from its .content-small parent. Similarly .content-small can only have maximum dimensions of the .content div.