/ / Jak sprawić, aby dziecko przewijało się, gdy rodzic nie ma więcej miejsca do wzrostu - html, css

Jak sprawić, aby dziecko przewinęło się, gdy rodzic nie ma już miejsca na rozwój - html, css

wprowadź opis obrazu tutaj

Oto moja próba: 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>

Problemem jest to, że moje różowe dziecko nie zacznie przewijać, gdy rodzic nie będzie miał więcej miejsca do wzrostu.

Odpowiedzi:

1 dla odpowiedzi № 1

Posługiwać się display: flex; z flex-direction: column; aby przewinąć tylko różową część

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


0 dla odpowiedzi nr 2

Najwyraźniej za pomocą flexu zamknięto umowę:

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>