在设置像素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