How do I make the child div scrollable when it exceeds the parent's height?
I have 2 child divs nested within a parent div in a row template: parent is column and children are rows. 
The top child div has a variable height, but is guaranteed to be less than the height of the parent div.
The bottom child div also has a variable height. In some cases, the height of the child divs will make the bottom child div taller than the parent. In this case, I need to make the bottom div scroll. Please note, I only want the bottom div to scroll, not the entire parent div.
How should I do it?
See the attached jsfiddle for an example: 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;
}
source to share
Overflow only works when you give it a value to overflow when it is larger. Your value is relative to how big the vertex is, so using jQuery take that value and then subtract from the parent.
$(document).ready(function() {
$(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});
and add overflow
to children
.child1 {
background-color: red;
overflow: hidden;
}
.child2 {
background-color: blue;
overflow: auto;
}
source to share
Use the overflow
property:
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
overflow: auto;
}
EDIT:
if you only want to scroll the second div, you need to change its height to 30px
, so child1
both child2
will match the parent exactly height
and add a property there overflow
:
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
}
.child1 {
height: 70px;
background-color: red;
}
.child2 {
height: 30px;
background-color: blue;
overflow: auto;
}
source to share
Since this post still ranks very high on Google, I would like to post a better solution using flexbox. It's actually very simple. Use display: flex , flex-direction: column, and overflow: hidden for the parent and overflow-y: auto for the child.
.wrapper {
display: flex;
flex-direction: column;
overflow: hidden;
}
.scrollable-child {
overflow-y: auto;
}
Here's the handle: https://codepen.io/pawelsas/pen/vdwjpj
source to share