CSS прокрутка высоты столбца

У меня возникла проблема с созданием переполнений внутри вертикального div с относительно большим размером.

Вот скрипка: http://jsfiddle.net/ZgL59/

В принципе, у меня есть один большой вертикальный столбец, в котором есть два процентных div. В нижнем div есть контент, который больше, чем div, с переполнением-y: прокрутите его.

Однако, как вы можете видеть в скрипке, нижняя часть контента отключается в зависимости от браузера (последний "Y" в скрипке не совсем видимый). Это зависит от браузера. Это можно как-то исправить? Я не хочу падать в кроличью нору, пытаясь порадовать каждый браузер разной высотой.

Вот HTML:

 <div class="container">
     <div class="inner1">X</div>
     <div class="inner2">
         Tons of Content...
     </div>
 </div>

И CSS:

 html, body {
    height:100%;
    overflow:hidden;
 }

 .container {
    height:100%;
    background:blue;
 }

 .inner1 {
    height:30%;
    background:red;
 }

 .inner2 {
    height:70%;
    background:green;
    overflow-y: scroll;
 }