설정된 픽셀 div 다음에 나머지 div 채우기

Question

가변 폭 div가 있습니다. 내부는 2 개의 다른 것이고, 하나는 고정 폭이고, 다른 하나는 나머지 영역을 채우기로되어 있습니다. 그러나 나는 항상 그것을 채울 수 없습니다. 바깥 쪽 상자의 너비에 따라 너무 작거나 너무 커서 안쪽 상자 1 아래로 떨어집니다. inner-box-2는 어떻게 outer-box의 나머지 부분을 채우게합니까?

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

이 쉽게하지만, 완전히 비 직관적 그 이상한 답변 중 하나입니다. float 속성과 함께 overflow 속성을 사용하여 block formatting context을 트리거해야합니다.

이 부분을 참조하십시오. jsFiddle example.

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

은 내가 한 모든 폭을 제거하고 #inner-box-2 사업부에서 떠와 overflow:auto

을 추가했다