Flexbox child expands container instead of overflowing

I'm trying to create a layout using flexbox but I'm stumped as to why I can't force a particular section of my UI to overflow with scrollbars. Everything seems to work great until a large child is added which seems to expand everything.

Here's the pen: http://codepen.io/tuckwat/pen/NNWRaB?

Notice that scrollbars appear on the whole page, I want scrollbars to appear on the #view container (dark blue) when a child gets too big.

Here's a pen with the overflow: auto added to #view - http://codepen.io/tuckwat/pen/VawKyp

How can I get this layout to work? I don't want to use absolute positioning on the view because the sidebar or appbar can dynamically resize.

HTML

<div id="body"><div id="appbar">appbar</div><div id="main"><div id="sidebar">side</div><div id="content"><div id="navbar">nav</div><div id="view">        This view container should scroll<div id="view-content">         This content makes the view grow too large</div></div></div></div></div>

CSS

#body{  background: #ccc;  display:flex;  flex-direction: column;  position:absolute;  left: 0px;  right: 0px;  bottom: 0px;  top:0px;}#appbar{  height:55px;}#main{  display: flex;  flex:1;  background: #ddd;}#sidebar{  height:100%;  background:#660099;  width:50px;  flex-shrink:0;}#content{  display:flex;  flex:1;  flex-direction:column;}#navbar{  height:20px;  background:#3cd;}#view{  flex:1;  background:#126;  overflow: auto;}#view-content{  width:1500px;  height:1500px;  background: #ff6600;}