Стоит задача: сверстать прямоугольник 300x200px, верх которого (green) имеет неизвестную высоту (по высоте контента), а основная область (blue) занимает всю оставшуюся область прямоугольника и по ширину и по высоте.
При этом контент основной области может быть большим и в ширину и в высоту, поэтому основная область (именно она, а не весь прямоугольник!) должна иметь 2 скроллбара (по необходимости).
Так должно выглядеть:
Погуглив по теме "div fill remaining height", бодро приступил решать задачу, сделав контейнер display:table, основную область - display:table-row с height:auto, а в ней - еще один div с height:100%:
<div style="background-color: red; display: table; width: 300px; height: 200px;">
<div style="background-color: green; display: table-row; height: 0;">
Lorem ipsum
</div>
<div style="background-color: blue; width: auto; display: table-row; height: auto;">
<div style="height: 100%; width: 100%; overflow-y: auto;">
11111111111111111111111111111111111111111111111111111111111111111111111111<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br> 11
<br>
</div>
</div>
</div>
По части height все отлично.
Чего не сказать о width. Которая, как ясно по скриншоту, выходит отнюдь не равной 300px. Прямоугольник тупо растягивается по ширине.
Оказывается, div(display:table-row) абсолютно плевать на width:100% как в ее подопечном div, так и если задать его и ей самой.
Хотя, если фиксированно задать 300px подопечному, а div(display:table-row) оставить height:auto, то это он понимает.
Но вся это верстка - не одноразовое решение где-то там, а гибкая вещь на века, поэтому мне не подходит вариант задавать height/width где-то еще, кроме как в контейнере. И JS для этого не предлагать - он здесь костыль.
В голове крутится, что основную область нужно заключить еще в один контейнер. Еще в голове крутится table-cell. Но что-как-куда - ума не приложу.
Пробовал всяко, но ничего нового так и не достиг.