divの中の要素がはみ出る。

Question

<style type="text/css">
.content {
	width: 20em;
	height: 10em;
	position: absolute;
}

.header {
	width: 100%;
	height: 1.5em;
	
	background-color: #aaf;
}

.header:after {
	display: block;
	content: '';
	clear: both;
}

.left {
	float: left;
}

.right {
	float:right;
}

.main {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	
	background-color: #ccc;
}
</style>



<div class="content">
	<div class="header">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	
	<div class="main">
		aaa<br>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa<br>
	</div>
</div>

上のhtmlを書いたのですが、親クラス（content）から子クラス（main）がはみ出してしまします↓

どうすれば治りますか。

都合上、contentクラスはposition:absolteにしないといけません。

Answer 1

mainの高さ + headerの高さ = 100% + 1.5em
なのではみ出しています。

mainの高さをcalc(100% - 1.5em)にすれば収まります。

Comments

[N---------]

できました。ありがとうございます！