在設置像素div後填充div的其餘部分

Question

我有變化的寬度div。裏面有兩個人，一個是固定寬度，另一個應該填充該區域的其餘部分。但我無法讓它始終填滿。根據外盒的寬度，它要麼太小，要麼太大，掉到內盒1以下。我如何獲得內盒2來填充外盒的其餘部分？

http://jsfiddle.net/Y57YP/

HTML

<div id ="outer-box"> 
    <div id="inner-box-1"></div> 
    <div id="inner-box-2"></div> 
</div> 

CSS

#outer-box{ 
    width:50%; 
    background:#fcc; 
    position: relative; 
    overflow: auto; 
} 
#inner-box-1{ 
    height:50px; 
    width:50px; 
    background:#ccc; 
    float:left; 
} 
#inner-box-2{ 
    height:50px; 
    width:80%; 
    background:#555; 
    float:left; 
} 

Answer 1

這是那些奇怪的答案是容易的，但完全不直觀的一個。您需要通過使用overflow屬性和float屬性來觸發block formatting context。

看到這個jsFiddle example。

#inner-box-2{ 
    height:50px; 
    background:#555; 
    overflow:auto; 
} 

我所做的只是移除寬度並從#inner-box-2 DIV浮動並添加overflow:auto