Css - 修復容器，塊內溢出

Question

我有一個固定大小的容器和一個孩子在裏面。孩子的內容是可變的。 我需要將孩子擴展到內容的長度。如果我爲childred使用固定寬度，瀏覽器將顯示一個scoll欄。任何這個好的解決方案？

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

你根據父的寬度要孩子的大小？使用這個CSS：（顏色和填充添加到您展示孩子們的大小父的寬度）

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

.content { 
    background: Green; 
} 

工作例如：http://jsfiddle.net/TVJB9/1/

你想要孩子的大小根據自己的內容？使用這個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/