flexbox 내의 div

https://jsfiddle.net/kLfx2k4t/

flexbox를 만들고 그 안을 나누고 싶어서 flex로 다시 나누었는데요.
나누어진 그 공간 안에 텍스트 작성을 위해 div를 만들었더니 제일 상위의 flexbox 크기가 변해버립니다.
flexbox 내의 div 크기를 지정해주고 싶을 땐 어떻게 하나요?
또 위에 보면 header 아래부분에 마진이 생기는데 아무리 0을 주거나 해도 안없어집니다.ㅠㅠ