Padding a wysokość elementu

Mam dwa elementy jak niżej:

HTML:

<div id="container_about">
	<div id="bgr_about">
	</div>		
</div> 

CSS:

#container_about {
	max-width: 100%;
	max-height: 100vh;
	height: 100vh;
	display: block;
	background-color: red;
	padding: 100px;
}

#bgr_about {
	max-width: 100%;
	height: 50vh;
	display: block;
	background-color: black;
}

Próbuję zrobić tak, żeby #bgr_about zawierał się w #container_about, przy czym odstęp od krawędzi ekranu dla #bgr_about wynosił 100px, a całkowita wysokość #container_about wynosiła 100vh. Niestety, w efekcie zapisu tak jak powyżej, element #container_about zwiększa swoją całkowitą wysokość o padding (tj. całkowita wysokość wynosi 100vh+200px). Będę wdzięczny za pomoc w poprawnym zapisie.
Pozdrawiam.

Dopisz do rozmiaru kontenera

box-sizing: border-box

spowoduje to, że rozmiar jaki podasz dla kontenera będzie uwzględniał padding.