max width of inside div not working

just practising with the max-width property in CSS. In the following code, the inside div .topimage (the one with red color) is not appearing at all even after setting max-width: 960px;max-height: 200px; What could be the reason? Please note, I am using max width/height because I want the inside div to scale according to the size of browser window.

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

.wrapper {
	height: 800px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	margin-right: auto;
	position: relative;
}



.topimage {
	max-width: 960px;
	max-height: 200px;
	background-color: rgba(255,0,0,1);
}

<div class="wrapper">
<div class="topimage">
</div>
</div>