Full width child elements inside scrollable container
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>
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>