JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

	<div class="items"> ITEM 1 </div>
	<div class="items"> ITEM 2</div>
	<div class="items"> ITEM 3</div>
	<div class="items"> ITEM 4</div>
	<div class="items"> ITEM 5</div>
	<div class="items"> ITEM 6</div>
	<div class="items"> ITEM 7</div>
	<div class="items"> ITEM 8</div>
	<div class="items"> ITEM 9</div>
  <div class="items"> ITEM 10</div>

</div>

<br>
VS
<br>

<div class="container">

	<div class="items"> ITEM 1 </div>

</div>

CSS

.container{
	width: 100%;
	background-color: gray;
	overflow: scroll;
	display: flex;
  gap: 1em;
	justify-content: center;
}

.items{
	width: 100px;
	height: 100px;
	display: inline-block;
  flex-grow: 0;
	flex-shrink: 0;
  background-color: blue;
  color: white;
  text-align: center
   margin: auto;
}