html - その間の残りのスペースをすべてカバーするために div コンテナを合わせる方法は?

Question

中央の div がコンテナの外に出てしまいましたが、どうすれば左右の間の残りのスペースを確保できますか? 左と右は完全に見える必要がありますが、中央のコンテンツはオーバーフローして非表示にすることができます

** jsFiddle **

HTML

<div id=container>
    <div id=left>
        <div>first element</div>
        <div>second element</div>
        <div>third element</div>
    </div>
    <div id=right>right frame variable width</div>
    <div id=center>
        <div>first element</div>
        <div>second element</div>
        <div>third element</div>
    </div>
</div>

CSS

html,body{margin:0;}
*{box-sizing:border-box;}
#container {
    height:30px;
    white-space:nowrap;
    background-color:lightgreen;
}
#left {
    float:left;
    border:4px solid black;
    height:100%;
}
#left *{
    border:2px solid blue;
    display:inline-block;
    height:100%;
}
#center {
    float:left;
    border:4px solid black;
    display:inline-block;
    overflow:hidden;
    height:100%;
}
#center *{
    border:2px solid red;
    display:inline-block;
    height:100%;
}
#right {
    float:right;
    border:4px solid black;
    height:100%;
}

Answer 1

要素からfloat:leftandを削除するだけです..display:inline-block#center

http://jsfiddle.net/Z2x8e/8/のデモ