Hola, Oskar.
Tu caja verde sí crece, pero como a la caja roja le has puesto un desplazamiento superior de 50px, eso es lo que sobresale de la verde.
Cambia tu top: 50px; por margin-top: 50px; y saldrá como quieres.
Por cierto, una consulta muy bien documentada, sí señor. Así deberían ser todas
Mikel.