CSS、親要素から子要素がはみ出してしまうのはなぜ？

親に　position: relative;
子に　position: absolute;
と書くと親のサイズ内に子が収まるようになる。

#header {
	width: 100%;
	position: relative;
	background: url(./img/main.png);
	background-size: contain;
	border: 3px solid black;
	overflow: hidden;
}
	/* 高さを幅の % に固定 */
	#header:before {
		content: "";
		display: block;
		padding-top: 44%;
		overflow: hidden;
	}
#header_in {
	margin: 0;
	display: inline;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid red;
}