Full-sized child elements inside a scrollable container

Question

I have a fixed width div container, and some children can be larger than the parent.

Is it possible to allow all children the full width of the scrollable area from the parent ( overflow: auto )?

 #container { width: 200px; background-color: grey; overflow:auto; margin:10px; } #container p{ display:block; background-color: green; white-space: nowrap; width: 100%; } 

 <div id="container"> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> 

Here is the fiddle . When you go right, you can see that the background color of the children is less than the content.

Answer 1

Just add min-width and show it inline-block :

 #container p{ display:inline-block; background-color: green; white-space: nowrap; min-width: 100%; } 

JSFiddle Demo

ANSWER 2:
To answer your question in the comments, you need to wrap the content in a div and set it to display:inline-block :

 #container { width: 200px; background-color: grey; overflow:auto; margin:10px; } #container > div{ display:inline-block; } #container p{ display:block; background-color: green; white-space: nowrap; } 

 <div id="container"> <div> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> </div> 

Answer 2

You can set child elements in display:table-row;

 #container { width: 200px; background-color: grey; overflow: auto; } #container p { display: table-row; background-color: green; white-space: nowrap; } 

 <div id="container"> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> 

Add an extra <div> if you need additional controls for styling.

 #container { width: 200px; background-color: grey; overflow: auto; } #container div { display: table; border-spacing: 0 10px; } #container p { display: table-row; background-color: green; white-space: nowrap; } 

 <div id="container"> <div> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> </div> 

Answer 3

To do this, you can use the absolute position property.

 #container { width: 200px; background-color: grey; overflow:auto; margin:10px; } #container p{ display:block; background-color: green; white-space: nowrap; position:absolute; }