Html IE和Chrome中溢出滚动条位置的差异

我有一个非常基本的功能，在IE和Chrome中显示不同的行为

HTML:

Internet Explorer 11.0.9600.17843：

Chrome 46.0.2490.80米（注意底部的水平滚动条）

为什么会发生这种情况，我如何纠正它，使它们都像现在IE上的一样工作

编辑： 这里有一个更简单的例子来说明这个问题。这似乎是一个不同的方式

溢出：自动已计算

HTML:

如果将其更改为
溢出：滚动它们的行为都相同

<div id="viewer">
    <div id="actionsPaneContainer">
        <div id="content">
            Lorem ipsum dolor...
        </div>
    </div>
</div>

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}
#viewer {
    position: relative;
    background-color: #cac;
    width: 100%;
    height: 100%;
}
#actionsPaneContainer {
    position: absolute;
    max-height: 100%;
    left: 50px;
    overflow: auto;
}
#content {
    white-space: no-wrap;
    background-color: #afc;
    width: 200px;
    height: 3000px;
}

<div id="container">
    <div id="content">
        CSS is fun!
    </div>
</div>

#container {
    overflow: auto;
    position: absolute;
    max-height: 90px;
}
#content {
    background-color: #bad;
    width: 100px;
    height: 100px;
}