html - 当 parent 没有更多的成长空间时如何使 child 滚动

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>