Flexbox columns overlap

I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.

http://jsfiddle.net/w8ts4Lnx/5/

I want the items to stay inside the group and let the group grow horizontally.

body {    height: 100%;    display: flex;    flex-flow: column wrap;}h1 {   padding: 1em;}#content {    padding: 10px;    background-color: #eee;    display: flex;    flex-flow: row nowrap;    flex-grow: 1;}#content > .group {    margin: 10px;    padding: 10px;    border: 1px solid #cfcfcf;    background-color: #ddd;    display: flex;    flex-flow: column wrap;     max-height: 600px;    }#content > .group .item {    margin: 10px;    padding: 10px;    background-color: #aaa;    width: 200px;}

Any ideas what I'm missing?