Как установить высоту div области содержимого с динамическим заголовком div

Question

Я работаю над стилем контейнера с заголовком и областью содержимого, как показано ниже.

widget control 
------------------ 
| header text | <----- header area 
------------------ 
| item1   | 
| item2   | <---- content area 
| item3   | 
|    | 
------------------ 

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

Однако проблема возникает, когда текст заголовка слишком долго вызывает 2 или более строк:

widget control 

------------------ 
| header text | 
| long text here | <----- header area 
------------------ 
| item1   | 
| item2   | <---- content area 
| item3   | 
|    | 
------------------ 

Теперь, когда область заголовка получить выше, что мое абсолютное позиционирование не может привести к области содержимого перекрывания в области заголовка.

У меня есть простой пример на скрипке. В этом примере не используется абсолютный подход позиции, поэтому перекрытие отсутствует, но затем , так как размер области заголовка не может быть предсказан, у меня есть время касания, определяющее, как установить высоту для области содержимого, чтобы полоса прокрутки входила в оставшуюся область содержимого. (Скрипка, показывающий, что полоса прокрутки обрезается, потому что высота области содержимого устанавливается на 100%, что высота 100% от самого блока управления (т.е. 100px)

http://jsfiddle.net/Lguwvwou/13/

Обратите внимание, что я ищу для решения с помощью CSS только и настройки статической высоты области содержимого (например, 50px) не допускается. причина в том, что это виджет управления и пользователь может установить высоту элемента управления, но они не имеют контроля над установкой высоты на заголовок или области содержимого.

Итак, если пользователь установил высоту 300 пикселей для элемента управления, длинный текст заголовка мог бы занять 100px. Затем оставшаяся высота для области содержимого составляет 200 пикселей.

Заранее спасибо.

Answer 1

Единственный способ я знаю, как сделать это с Flexbox:

.container { 
    width: 300px; 
    height: 100px; 
    border: 1px solid red; 
    display: flex; 
    flex-direction: column; 
} 

.head { 
    border: 1px solid blue; 
    width: 100%; 
    flex-shrink: 0; 
} 

.content { 
    border: 1px solid green; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 


<div class='container'> 
    <div class='head'> this is head second line asdlkfj aslkf j;alksdj f;laksdjf;laksdjf;laskdf</div> 
    <div class='content'> 
     <div class='item'>item1</div> 
     <div class='item'>item2</div> 
     <div class='item'>item3</div> 
     <div class='item'>item4</div> 
     <div class='item'>item5</div> 
     <div class='item'>item6</div> 
    </div> 
</div> 

Обновлено JSFiddle: http://jsfiddle.net/Lguwvwou/19/