CSS абсолютное позиционирование, box-shadow и overflow auto

У меня есть абсолютная позиционная оболочка div, содержащая мои элементы меню.

Элемент обертки расположен непосредственно в верхней и нижней частях окна просмотра, поэтому его высота всегда равна 100% окна браузера.

Элементы меню внутри элемента оболочки имеют тень коробки, которая переполняет оболочку с правой стороны. Обычно это не проблема, и тень все еще видна.

Однако мне нужно сделать прокручиваемую оболочку, если элементы меню внутри выше, чем сама обертка. Но добавление overflow-y: auto вырезает тень меню с правой стороны (видима ли полоса прокрутки или нет).

HTML

<div id="wrapper">
    <div id="menu">
        <div id="main">Main</div>
        <div id="sub">Sub</div>
    </div>
</div>

CSS

#wrapper {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:250px;
    background-color:#eee;
    overflow-y:auto;
}

#menu {
    position:relative;  
    box-shadow:1px 1px 2px rgba(0,0,0,1);
}

#main {
    height:200px;
    background-color:green;
    padding:5px;
}

#sub {
    height:100px;
    background-color:orange;
    padding:5px;
}

Проверьте эту скрипту: http://jsfiddle.net/Kc9Zk/

Как я могу сделать тень видимой, если нет полосы прокрутки?

Обратите внимание, что я не хочу, чтобы оболочка была более широкой, чем элементы внутри, потому что полоса прокрутки выглядела бы несколько неуместной, если она видна.