상위 부동 요소가 퍼센트 너비의 자식으로 크기 조정되지 않음

Question

width: 30%을 사용하는 하위를 포함하는 부동 부모 div가 있습니다.

너비 단위로 퍼센트를 사용하면이 상위 div의 크기가 조정되지 않지만 px 또는 ems를 사용할 때 잘 작동합니다.

유체 레이아웃을 갖고 싶기 때문에 width: 30%을 사용할 때 부모 div의 너비를 조정할 수있는 방법이 있습니까? 그것이 전체 가능한 폭을 기본값으로하는 div 때문에, http://jsfiddle.net/sBzYH/

<div class='percent container'> 
    <div> 
     <h3>width: 30%</h3> 
     <p> 
      When using the child div 
      with percent width, the floating 
      parent div keeps expading 100%. 
     </p> 
    </div> 
</div> 

<div class='pixel container'> 
    <div> 
     <h3>width: 100px</h3> 
     <p> 
      When using the child div 
      with pixel width, the floating 
      parent div resizes accordingly. 
     </p> 
    </div> 
</div> 

Answer 1

는 부모 컨테이너가 이미 유체 폭 될 것입니다하지만 당신은 명시 적으로 수행 할 수 있습니다

하는 것은 자세한 내용은이 예에서 참조하시기 바랍니다 그것을 제한하십시오. This CSS은 거의 같은 크기 당신의 두 가지 예 만들 것입니다 :

.container { 
    width: 66%; 
    min-width: 325px; 
} 

(바로 아래)보다 더가 있다면 컨테이너에 해당하는 500 픽셀 다음은 사용 가능한 공간의 66 %를 차지하도록 확장됩니다,하지만 넓은 남아있을 것입니다 30 % 너비 하위 요소는 항상 최소 100 픽셀 너비 여야합니다.