CSSのオーバーフロー：下絶対positionningとの相対的な高さ

Question

はい、CSS上の他の迷惑なオーバーフローの質問...ここ

は、私の場合です：

HTML

<div id="parent"> 
    <div id="child1"> 
    Some short content that may take a line or two. 
    </div> 
    <div id="child2"> 
    Some short to very long content that may overflow parent div... 
    </div> 
<div> 

CSS

#parent { 
    position: absolute; 
    height: 100%; 
    width: 100px; 
} 

#child1 { 
} 
#child2 { 
    overflow: auto; 
} 

ご覧のとおり、必要に応じてchild2を親divにオーバーフローさせたいと思います。しかし、私は子供2の正確な高さを知りません（子供1は少し変わる可能性があるので）私はbottom: 0pxとtop: ???pxで慣れていたので、絶対的なポジショニングはできません。

と遊ぶためにいくつかのJSFiddle：私はいくつかの醜いJSのコードスニペットを使用しますが、私はできれば、私はもう一度、CSSを習得するために幸せになるでしょう最悪の場合にはhttps://jsfiddle.net/6r3ojecL/1/

。 :)

ありがとう！

Answer 1

display: flexを使用したソリューション。この場合には動作しない場合がありoverflow` `updated fiddle

#parent { 
 
    display: flex; 
 
    position: absolute; 
 
    height: 50%; 
 
    width: 100px; 
 
    border: 1px solid red; 
 
    background-color: red; 
 
    flex-direction: column; 
 
} 
 
#child1 { 
 
    height: 50px; 
 
    background-color: yellow; 
 
} 
 
#child2 { 
 
    flex: 1; 
 
    background-color: green; 
 
    overflow: auto; 
 
}

<div id="parent"> 
 
    <div id="child1"></div> 
 
    <div id="child2"> 
 
    child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content 
 
    </div> 
 
</div>

Answer 2

親ではなく、子ではなくオーバーフローを設定します（更新済み）。

CSS

#parent { 
position: absolute; 
height: 100%; 
width: 100px; 
overflow: auto; 
} 
#child1 { } 
#child2 { }