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/

在你更新后我设法做出你的要求，引用“蓝色应该保持固定。绿色应该延伸到蓝色，所以文字将在一行。绿色框没有固定的宽度。”但是，在这个例子中我没有看到Blue的目的： http://jsfiddle.net/vMyhn/3/