Css - 컨테이너 내부에 오버 플로우가 발생했습니다.

Question

저는 고정 된 크기의 컨테이너와 아이들을 내부에두고 있습니다. 아이들의 내용은 다양합니다. 자녀를 콘텐츠의 길이만큼 확장해야합니다. 고정 된 너비를 childred에 사용하면 브라우저에 scoll bar가 표시됩니다. 이것에 대한 좋은 해결책이 있습니까?

http://jsfiddle.net/vMyhn/2/ 파란색은 고정되어 있어야합니다. 텍스트가 한 줄로 표시되도록 녹색이 파란색 위로 확장되어야합니다. 녹색 상자에 고정 폭이 없습니다.

Answer 1

가지 적어 컨테이너 : 당신이 긴 컨텐츠를 원하는 경우

overflow: hidden 

Answer 2

, 당신은 CSS를 사용하여이 함께 공간을 보존합니다.

<div style="width:1000px"> 
    <span style="white-space:pre-wrap">  abc   abc   abc   abc   abc   abc   abc  abc</span> 
</div> 

Answer 3

당신은 부모의 너비에 따라 크기로 아이를 원하십니까? (색상 및 패딩은 아이들이 부모의 폭의 크기 있음을 보여 추가)

.container { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    width: 400px; 
    background: Blue; 
} 

.content { 
    background: Green; 
} 

근무 예 : http://jsfiddle.net/TVJB9/1/

당신이 그 내용에 따라 크기로 아이를 원하십니까이 CSS를 사용? 이 CSS를 사용

.container { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    width: 400px; 
    background: Blue; 
} 

.content { 
    background: Green; 
    display: inline-block; 
} 

작동 예 (색상 및 패딩은 어린이들이 컨텐츠의 폭 크기를 있음을 보여주기 위해 추가) : http://jsfiddle.net/vMyhn/1/

그리고 당신의 업데이트 후 내가 무엇을 할 manged했던 당신 "파란색은 고정 된 채로 있어야합니다. 녹색은 파란색 위에 연장되어 텍스트가 한 줄에 표시되어야합니다. 녹색 상자에는 고정 폭이 없습니다." 그러나 나는이 예제에서 Blue의 목적을 보지 못한다 : http://jsfiddle.net/vMyhn/3/