当父母没有更多的成长空间时，如何使子项可滚动

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

显然使用flex密封了这笔交易：

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

string admissionDischargeDT = adDT.Text;
string admissionDT = admissionDischargeDT.Substring(0,17);
string dischargeDT = admissionDischargeDT.Substring(18,17);

DateTime admissionDTinput = DateTime.ParseExact(admissionDT,"dd-mm-yyyy hh:mm tt",System.Globalization.CultureInfo.InvariantCulture);
DateTime dischargeDTinput = Convert.ToDateTime(dischargeDT);