xxxxxxxxxx
<div style="overflow-x: auto; white-space: nowrap;">
<!-- Content inside the horizontal scrollable div -->
<p style="display: inline-block;">Element 1</p>
<p style="display: inline-block;">Element 2</p>
<p style="display: inline-block;">Element 3</p>
<p style="display: inline-block;">Element 4</p>
<!-- Add more elements within the div as needed -->
</div>
xxxxxxxxxx
overflow-x: auto(show when needed) or hidden(never) or scroll(always scroll);
xxxxxxxxxx
<div class="outer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>