Как сделать дочерний div прокручиваемым, когда он превышает родительскую высоту?

Question

У меня есть 2 дочерних divs, вложенных в родительский div в строке столбца: родительский столбец, а дети - это строки.

Верхний дочерний div имеет переменную высоту, но гарантированно будет меньше высоты родительского div.

Нижний дочерний div также имеет переменную высоту. В некоторых случаях высота дочерних divs сделает нижний дочерний div выше родителя. В этом случае мне нужно сделать прокрутку нижнего div. Обратите внимание: я хочу, чтобы прокручивался только нижний div, а не весь родительский div.

Как с этим справиться?

Смотрите приложенный jsfiddle для случая, например: http://jsfiddle.net/0yxnaywu/5/

HTML:

<div class="parent"> 
    <div class="child1"> 
     hello world filler 
    </div> 
    <div class="child2"> 
     this div should overflow and scroll down 
    </div> 
</div> 

CSS:

.parent { 
    width: 50px; 
    height: 100px; 
    border: 1px solid black; 
} 

.child1 { 
    background-color: red; 
} 

.child2 { 
    background-color: blue; 
} 

Answer 1

Переполнение работает только тогда, когда вы даете ему значение для переполнения, когда оно больше. Ваше значение относительно того, насколько велика вершина, поэтому с помощью jQuery возьмите это значение, а затем вычтите из родителя.

$(document).ready(function() { 
    $(".child2").css("max-height", ($(".parent").height()-$(".child1").height())); 
}); 

и добавить overflow «s детям

.child1 { 
    background-color: red; 
    overflow: hidden; 
} 

.child2 { 
    background-color: blue; 
    overflow: auto; 
} 

http://jsfiddle.net/m9goxrbk/

Answer 2

Использование overflow свойство:

.parent { 
    width: 50px; 
    height: 100px; 
    border: 1px solid black; 
    overflow: auto; 
} 

jsFiddle

EDIT:

если вы хотите только второй DIV будет прокручивать, вам необходимо изменить его высоту 30px так child1 и child2 будет точно соответствовать родителю height и добавить overflow недвижимость там:

.parent { 
    width: 50px; 
    height: 100px; 
    border: 1px solid black; 
} 

.child1 { 
    height: 70px; 
    background-color: red; 
} 

.child2 { 
    height: 30px; 
    background-color: blue; 
    overflow: auto; 
} 

jsFiddle

Answer 3

Поскольку этот пост до сих пор рейтинг очень высоко в Google, я хотел бы опубликовать лучшее решение с использованием Flexbox. На самом деле это очень просто. Использование дисплея: сгибать, Flex-направление: колонки и переполнения: скрытый для родителей и перелива-у: авто для ребенка.

.wrapper { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
} 

.scrollable-child { 
    overflow-y: auto; 
} 

Вот ручка: https://codepen.io/pawelsas/pen/vdwjpj