Схлопывание отступов и оверлей

[Okieazy]

Столкнулся с проблемой схлопывания отступов при уменьшении высоты браузерного окна. Пофиксил, добавив overflow: auto; родительскому элементу. Однако, на оверлей это не действует. Как исправить?

 

<header class="header overlay">		
	<div class="header-content">
		<h1 class="header-content__title">We are awesome creative agency</h1>
		<p class="header-content__descr">This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem 			quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
	</div>
</header>

 

.overlay:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	background-image: -webkit-linear-gradient(0deg, rgba(9, 5, 47, 0.851) 0%, rgba(49, 29, 94, 0.851) 100%);
	background-image: -ms-linear-gradient(0deg, rgba(9, 5, 47, 0.851) 0%, rgba(49, 29, 94, 0.851) 0%);
	z-index: -1;
}

.header {
	position: relative;
	max-height: 670px;
	height: 100vh;
	background-image: url('../images/header-bg.jpg');
	background-position: top center;
	background-size: cover;
	z-index: 1;
	overflow: auto;
}

.header-content {
	max-width: 700px;
	margin: 0 auto;
	margin-top: 150px;
	text-align: center;
	padding: 0 15px;
}