Html – DIV with max-height and overflow-y causes IE11 to enable window’s vertical scroll-bar — why

As it would be hard to include whole code here, there's a brief description of the problem (and some crafted snippets later): there's this DIV element with display set to none which popups by setting display to block (on some onclick event — like a menu). As the content of this DIV is lager than the whole page, when the DIV.style.display == block, browser adds vertical scroll-bar to its window — and that's fine. Well, I decided to set max-height and overflow-y on this DIV, but thou DIV has nice vertical scroll-bar on its own (it works as expected), browser — specifically IE11 — still adds vertical scroll-bar to the window, as in previous case. You can use it to scroll whole page, but with no apparent point (there's simply no content on the bottom of the window to scroll to).

Here how it looks (more or less) in the code. CSS first:

div.mydiv {
    display: none;
    position: absolute;
    border-width: 1px 0px 0px 0px;
    border-color: #BBBBBB black black black;
    border-style: solid solid solid solid;
    border-radius: 0px 0px 5px 5px;
    background-color: white;
    padding: 4px;
    line-height: 11px;
    font-size: 10px;
    font-weight: normal;
    color: #FFFFFF;
    opacity: 1;
    left: -6px;
    top: 12px;
    cursor: default;
    box-shadow: 1px 1px 3px #888888, -1px 1px 2px #EEEEEE;
    z-index: 1600;
}

Now HTML:

<div class="mydiv" style="overflow-y: scroll; max-height: 300px;">...</div>

In FireFox it works as expected, i.e. DIV gets its vertical scroll-bar if max-height of this DIV excesses 300px and browser does not add vertical scroll-bar to the window. In IE11 DIV also gets its scroll-bar, but also does browser's window (only if DIV is visible, i.e. div.style.display == block). Any ideas how to get rid of this browser's behavior?

UPDATE: here's fiddle to demonstrate it — please note the vertical scroll-bar in Result frame that appears when list is shown.