可滚动容器内的全宽子元素

Question

I have a div-container with a fix width and some child-elements witch could be bigger than the parent.

Is it possible to let all the child-elements take the full width of the scrollable area from the parent-element ( 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 scroll to the right, you can see that the child-elements background-color is smaller than the content.

Answer 1

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 could set the child elements to 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 a extra <div> if you need extra 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

You can use from absolute position property to do that .

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