绝对位置div高度不增加

Question

在下面的代码中，我试图增加位于其父div .dropdown（绿色）之下的content-small（灰色的）的高度。我注意到当我尝试将高度增加到50px以上时，没有任何反应。我不知道为什么。在这里，我正在尝试下拉菜单。

*{
    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

它继承了max-height父级的.content-small属性。同样，.content-small只能拥有.content div的最大尺寸。