Child margin doesn't affect parent height

It's called Collapsing margins. Documentation from www.w3.org:

6.2. Collapsing margins

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

More information with examples: http://www.w3.org/TR/css3-box/#collapsing-margins

You can add overflow: auto; to the parent element to fix this.

Fiddle: http://jsfiddle.net/k1eegxt3/2/

Add display: flex; to parent element adjust flex direction, align and justify as you want but the margin thing with appear as you want.