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

Because this post is still ranking very high in Google, I'd like to post a better solution using flexbox. Actually this is very simple. Use display: flex, flex-direction: column and overflow: hidden for parent and overflow-y: auto for child.

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

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

Here's the pen: https://codepen.io/pawelsas/pen/vdwjpj