Некоторое время ломаю голову над такой загадкой.
Есть фиксированная колонка (.col), содержащая два вертикальных блока. Нужно сделать так, чтоб верхний блок (.head) зависел от контента, т.е. при увеличении контента, чтоб он растягивался без появления скролла (как и должны себя вести блоки по умолчанию).
Второй блок (.bottom) по задумке дизайнера должен занимать остаток высоты. При этом, если во втором блоке находится много содержимого, должна появляться полоса прокрутки ТОЛЬКО в этом блоке, а не во всей колонке.
Как это сделать одной строчкой js, я конечно знаю. Но вызывать пересчет высоты при каждом изменении .head не очень красиво, а следить за этим блоком по setInterval тоже такое себе решение.
Я знаю также как это решить в современных браузерах с поддержкой flex.
А можно ли это сделать на css без flex?
Примерная разметка:
<div class="col">
<div class="head">
<div class="top1">bla</div>
<div class="top2">bla</div>
</div>
<div class="bottom">
<ul class="list">
<li>bla</li>
<li>bla</li>
...
<li>bla</li>
</ul>
</div>
</div>
песочница здесь - если надо для решения изменить разметку, я не против.