Cómo hacer que el niño sea desplazable cuando el padre no tiene más espacio para crecer: html, css

Aquí está mi intento: http://jsbin.com/xokidev/7/edit?html,output

  <phone style="
display:block;
position:relative;
margin:auto;
width:300px;
height:500px;
background:silver;
overflow:hidden">
<navigation-or-something style="
display:block;
position:absolute;
height:100px;
width:100%;
background:skyblue">
known height. don"t overlap
</navigation-or-something>
<component style="
position: absolute;
right:0;
bottom:0;
left:0;
max-height: calc(100% - 100px);
display:block;">
<header style="background:yellow">
multiline variable text height. multiline variable text height
</header>
<container style="
display:block;
background: pink;
overflow-y:auto;">
<content>
some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content.
</content>
</container>
</component>
</phone>

El problema que encontrarás es que mi hijo rosado no comienza a desplazarse una vez que el padre no tiene más espacio para crecer.

Respuestas

Utilizar display: flex; con flex-direction: column; para hacer que se desplace solo la parte rosa

<phone style="
display:block;
position:relative;
margin:auto;
width:300px;
height:500px;
background:silver;
overflow:hidden">
<navigation-or-something style="
display:block;
position:absolute;
height:100px;
width:100%;
background:skyblue">
known height. don"t overlap
</navigation-or-something>
<component style="
position: absolute;
right:0;
bottom:0;
left:0;
max-height: calc(100% - 100px);
display: flex;
flex-direction: column;">
<header style="background:yellow">
multiline variable text height. multiline variable text height
</header>
<container style="
display:block;
background: pink;
overflow-y:auto;">
<content>
some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable
height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height
content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content.
some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some
variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content.
</content>
</container>
</component>
</phone>

Al parecer, utilizando Flex sell el trato:

http://jsbin.com/xokidev/8/edit?html,output

  <phone style="
display:block;
position:relative;
margin:auto;
width:300px;
height:500px;
background:silver;
overflow:hidden">
<navigation-or-something style="
display:block;
position:absolute;
height:100px;
width:100%;
background:skyblue">
known height. don"t overlap
</navigation-or-something>
<component style="
display:flex;
flex-direction: column;
position: absolute;
right:0;
bottom:0;
left:0;
max-height: calc(100% - 100px);">
<header style="background:yellow">
multiline variable text height. multiline variable text height
</header>
<container style="
display:block;
background: pink;
overflow: auto;">
<content>
some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content. some variable height content.
</content>
</container>
</component>
</phone>