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

Question

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

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

В принципе, у меня есть один большой вертикальный столбец с двумя на основе процентного метода дивы внутри него. В нижнем 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; 
} 

Answer 1

Если я прав, полагая, что вы имеете в виду под 'отрезать', увидеть эту fiddle, установив margin и padding до 0px на корпусе следует зафиксировать его. Протестировано в Chrome, FF и IE10 и выглядит нормально (опять же, если я понимаю вопрос).