flexbox 내의 div

[ninking]

https://jsfiddle.net/kLfx2k4t/

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

[progh2]

일단 두번째 여백 질문에 대해서는 아래 css를 입력해보세요.

* { margin:0px;}

flexbox 문제는 다른 분이.. ^^: