html - 子 div の高さ 100% 内側の位置: 固定 div + オーバーフロー auto

Question

次のことをしようとすると、奇妙な動作が発生します (jsfiddle: http://jsfiddle.net/9nS47/を参照)。

HTML:

<div id="slider">
    <div id="wrapper">
        <div id="navigation"></div>
        <div id="container">
            <div id="button"></div>
        </div>
    </div>
</div>

CSS:

HTML,BODY 
{ width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
    position: fixed;

    top: 0;
    bottom: 0px;
    left: 100px;

    overflow-y: auto;

    background-color: red;
}

#wrapper
{
    position: relative;

    height: 100%;

    background-color: #000000;

    min-height:400px;
}

#navigation
{
    display: inline-block;
    width: 80px;
    height: 100%;

    background-color: #0000FF;
}

#container
{
display: inline-block;
    height: 100%;

    background-color: #00FF00;
}

#button
{
    width: 22px; height: 100%;
    float:right;

    background-color: #CCFFCC;
    cursor:pointer;
}

私がやろうとしているのは、表示されているウィンドウの高さ全体にまたがる左側のナビゲーション バーを作成し、高さがたとえば 400px より小さい場合にのみスクロールバーを表示することです。そのdivのスクロールバーは、サイズ変更の問題により常に表示されているようです（説明できない余分なピクセルが下部にあります[色：赤]）。

また、Firefox は、スクロールバーがコンテンツ領域の一部であるように見えるため、スクロールバーが表示されているときに 2 番目の子要素を最初の子要素の下に移動し、最大で約 20px のスペースを占有します。ただし、Overflow: Auto が Overflow: scroll に置き換えられた場合、これは発生しません。

レイアウトを変更する ATM (具体的には、Position: fixed のコンテナー) はオプションではありません。

緑と青のボックスの間のスペースは気にしないでください。空白の問題のようです。