如何安裝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:left和display:inline-block來自#center元素..

演示在http://jsfiddle.net/Z2x8e/8/