How to make child div scrollable when it exceeds parent height?

Question

I have 2 child divs nested in a parent div in row-column pattern: the parent is a column, and the children are rows.

Answer 1

Use overflow property:

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

jsFiddle

EDIT:

if you want only second div to be scrollable, you need to change it height to 30px so child1 and child2 will exactly fit the parent height and add overflow property there:

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

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

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

jsFiddle