Css - fix container, overflow inside block

I have a fixed sized container and a children inside. The content of the children is variable. I need to expand the children to the length of the content. If I use a fixed width for the childred, the browser will display a scoll bar. Any good solution for this ?

http://jsfiddle.net/vMyhn/2/ Blue should开发者_开发知识库 stay fixed. Green should be extended over blue so the text will be in a single line. No fixed width for the green box.

Give container:

overflow: hidden

If you want long content, you can use CSS is preserve the spaces with this.

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

Do you want the children to size according to the width of the parent? Use this CSS: (colours and padding added to show you that the children size to the width of the parent)

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

.content {
    background: Green;
}

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

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

Working example: http://jsfiddle.net/vMyhn/1/

And after your update I manged to make what you asked, quote "Blue should stay fixed. Green should be extended over blue so the text will be in a single line. No fixed width for the green box." However I fail to see the purpose of Blue in this example: http://jsfiddle.net/vMyhn/3/