Responsive Scrollable Div

Question

I'd like to know if it's possible to make a div responsive and at the same time make its content scrollable within certain dimensions (max/min height).

Here is my attempt

http://codepen.io/anon/pen/rVEbWG

While the width is responsive the height remains the same (while I would like it to be 100px min and 400px max).

.wrapper {
    overflow: auto;
    max-height: 400px;
    width: 50%;
}
.content {
    overflow-y: auto;
}

Answer 1

Simple, just use the vh css unit for the height, like so: height: 100vh

.wrapper {
    overflow: auto;
    height: 100vh;
    width: 50%;

    border: 1px solid red;
}
.content {
    overflow-y: auto;
}

The 1 vh unit is relative to 1% of the height of the viewport, meaning that your div will be dependent on the height of your viewport.

If your viewport will be smaller than the div, you will be able to scroll trough it.