We are getting real picky here 
Look at the border on the parent div. It only goes down 500px. So the parent div is 500x500.
All the divs have a height of 500px.
Your child divs are overflowing outside the parent divs because the parent div can’t expand past 500px.
OK - thanks to all for helping me to master the concept of divs and not that I want anyone’s head to explode or anything of the sort but could I venture my understanding of this situation and ask for your confirmation of its correctness (or otherwise). We have 3 divs all blue stacked up on each other - collectively with a height = 1500 with the top one being the parent and the bottom 2 the child. The 4th yellow div is atop (obscures) the blue parent div. So what’s the verdict?