Q:

Scroll div inside hidden overflow div

Is possible to achieve design I wanted below?
With conditions:-
- container position:absolute to stick it to bottom of page
- container max-height:50%
- body div is scroll-able without fixed height while page is not scroll-able  
I want to toggle body div visibility by clicking in header so header div will stick to the bottom of page.

What I've tried:-  
.container {
    max-height: 50%;
    bottom: 0;
    position: absolute;
    overflow: hidden;
        // this makes .body div not scrollable
        // when this set to auto, header div will also scrollable
}

.content-body {
    height: 100%;
    overflow: auto;
}

Here's fiddle I created:- https://jsfiddle.net/vwoz8rr5/1/
If this is not possible or there are a better approach, I would like to know.
I would like to provide necessary information if needed.
Thank you in advance.

A:

Ok, now that I understand better what you want to achieve, here is a better jsFiddle:
https://jsfiddle.net/jqnxjkr0/ Better version based on your feedback
In this version:

.container has a max height that is set to 50% of the viewport height.
.content-header can have a variable height (e.g. multiple lines).
.content-body will take the rest of the available height.
.content-body can be scrolled when its content is too tall to fit.

If this version works for you, you should accept this answer instead of the first one.

