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>

Tags:

Html

Css

Recent Posts