Chrome焦点上的滚动行为

Question

我在聚焦具有绝对位置的div中的元素时遇到了一些麻烦。 问题在于绝对div具有大尺寸且超出窗口界限。当我专注于这个绝对div时，比chrome自动滚动寡妇身体，但我想阻止滚动

我知道有像“document.body.scrollTop = 0;”这样的javascript解决方案，但我想找到它的css解决方案吗？

HTML Codde：

<div class="container">
    <input type="button" value="make focus" onclick="document.getElementById('innerContainer').focus();" />
    <div tabindex="0" id="innerContainer" /></div>
</div>

Css代码：

 html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow:hidden;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    height: 200px;
    overflow: hidden    
}

#innerContainer{
    background-color: green;
    width: 100%;
    height: 4000px;
    position: absolute;
    top: 100px;
}
#innerContainer:focus{
    background-color: red;
}

链接到js小提琴 - https://jsfiddle.net/3tLbqj5z/2/