如何讓孩子滾動，當父母沒有更多的成長空間

Question

這裏是我的嘗試： 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> 

，你會發現，我的粉紅色的孩子無法啓動的問題一旦父母沒有更多的成長空間，就會滾動瀏覽。

Answer 1

使用display: flex;與flex-direction: column;使其滾動只粉紅色的部分

<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>

Answer 2

顯然使用柔性密封處理：

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>