-webkit-box-flex overflows entire page

-webkit-box-flex overflows entire page

I'm having a problem with the #body div element in chrome - when the
content is bigger than the flexbox the content overflows the entire page
does anyone know how to make the #body tag extent or grow as the content
gets bigger but it also has to be elastic so if the content isn't bigger
than the #body tag it should fit inside the window with the footer and
header?
fiddle here
CSS:
html, body
{
height:100%; display:-webkit-box; display:-ms-flexbox; -ms-flex:1;
-webkit-box-flex:1
}
body
{
margin:0px; display:-ms-flexbox; -ms-flex-flow:column;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-flex:1;
}
header
{
height:140px; background-color:#f00;
}
footer
{
height:140px; background-color:#f00; display:-webkit-box
}
#body
{
background-color:#ffd800; display:-ms-flexbox; -ms-flex:1 auto;
display:-webkit-box; -webkit-box-flex:1; -webkit-box-orient:vertical
}
HTML:
<header>Header</header>
<div id="body">
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
<p>Body</p>
</div>
<footer>Footer</footer>