div div занимают оставшееся окно браузера с нефиксированной общей высотой

Я могу получить скрипку Альваро: http://jsfiddle.net/S8g4E/955/, чтобы работать так, как я хочу, только для ширины, но не для высоты... мой нижний компонентный холст очень большой (квадрат 5000 пикселей), и я хочу его для прокрутки в обоих направлениях, но при этом "видовой экран" растет до полного размера его содержащего нижнего окна...

Если вы посмотрите на мою скрипку: http://jsfiddle.net/tconway556/4LCj2/

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down" style="overflow:scroll; width: 100%;">
       <canvas width="5000px" height="5000px">
       </canvas>
   </div>
</div>

#container { width: 100%; height: 300px; border:1px solid red;}
#up { background: green; height:80px}
#down { background:pink; height: calc(100% - 80px); }

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

Если вы измените размер браузера с помощью моей скрипки, ширина видового экрана холста адаптируется к содержащемуся окну, но высота остается фиксированной. Это имеет смысл, так как я исправил его на 300 пикселей... но...

Если я заменил фиксированный 300px на 100% в # контейнере, высота вырастет до 5000px +.... то, что я хотел, было тем же самым поведением, которое мы видим с шириной. то есть. Когда вы изменяете размер внешнего окна браузера, ширина и высота окна просмотра адаптируются к границам браузера...

У кого-нибудь есть решение для этого?