Прокрутить div внутри скрытого переполнения div

Question

Можно ли достичь дизайна, который я хотел ниже?

С условиями: -
- контейнер position:absolute, чтобы вставить его в нижней части страницы
- контейнер max-height:50%
- тело DIV является прокрутки в состоянии без определенной высоты, а страница не прокручивать-состоянии

Я хочу чтобы переключить видимость div тела тела, щелкнув заголовок, чтобы заголовок div придерживался нижней части страницы.

Что я пробовал: -

.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; 
} 

Вот скрипку я создал: - https://jsfiddle.net/vwoz8rr5/1/
Если это не возможно, или есть лучший подход, я хотел бы знать.
Я хотел бы предоставить необходимую информацию, если это необходимо. Спасибо заранее.

Answer 1

Хорошо, теперь, когда я лучше понимаю, что вы хотите достичь, здесь лучше jsFiddle:
https://jsfiddle.net/jqnxjkr0/Better version based on your feedback

В этой версии:

• .container имеет максимум высота, которая установлена ​​на 50% высоты просмотра.
• . Контент-заголовок может иметь переменную высоту (например, несколько строк).
• . Контент-тело займет остальную часть доступной высоты.
• . Контент-тело можно прокручивать, когда его содержимое слишком высокое, чтобы соответствовать.

Если эта версия работает на вас, вы должны принять этот ответ вместо первого.

Answer 2

Редактировать: См. my other answer для лучшей скрипки.

Похоже на хорошую работу для Flexbox, вот несколько jsFiddle, чтобы дать вам пример:

• https://jsfiddle.net/aw5qt19x/// Basic flexbox usage
• https://jsfiddle.net/aw5qt19x/2/// Based on your constraints/layout
• https://jsfiddle.net/aw5qt19x/4/// Working demo with js

Наконец здесь более подробное демо с прокручиваемым контентом:
https://jsfiddle.net/aw5qt19x/5/// Final?