Wystający div w środku innego diva

Dlaczego ten zielony (second-div) wystaje z prawej strony? Czy to przez position: absolute ?
https://jsfiddle.net/jfk0a530/

<div class="first-div"><div class="second-div"></div></div>

.first-div {
	position: relative;
	display: inline-flex;
	border: 10px solid red;
	width: 400px;
	height: 400px;
}
.second-div {
	position: absolute;
	border: 10px solid green;
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	right: 0;
}

Zastosowałem left: -2.4%
https://jsfiddle.net/jfk0a530/1/
i problem niby z głowy, ale czy jest może jakieś kulturalniejsze rozwiązanie (zachowując użytkowanie position: absolute) ?

Zapoznaj się dokładniej z box-model. Teraz po prostu wielkość diva jest powiększona o border, który nadałeś. Domyślnie rozmiary elementu wyliczane sa jako zawartość + padding + border (u ciebie 100% rodzica + 0 (nie ustawiasz paddingu) + 10px (border). Masz dwa wyjścia:

1. zmniejszyć szerokośc diva o wielkość ramki (10px)
2. ustawić właściwość box-sizing na border