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

Question

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

HTML：

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

CSS：

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;
}

Internet Explorer 11.0.9600.17843：

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

为什么会发生这种情况？我如何纠正它，以便它们的功能与现在的IE一样？

编辑： 这是一个更简单的JSFiddle来证明这个问题。它似乎与计算overflow:auto;的方式不同。

HTML：

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

CSS：

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

如果将其更改为overflow:scroll;，则它们的行为都相同。