CSS Переполнение: относительная высота с нижней абсолютной

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 при необходимости. Но поскольку я не знаю точную высоту child2 (потому что child1 может немного меняться), я не могу сделать какое-то абсолютное позиционирование, поскольку я привык с bottom: 0px и top: ???px.

Некоторые JSFiddle играть: https://jsfiddle.net/6r3ojecL/1/

В худшем случае я буду использовать некоторые уродливые JS фрагмент кода, но я буду счастлив, если смогу освоить CSS еще раз. :)

Спасибо!

Answer 1

Раствор с помощью display: flex. Проверьте 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 { }