JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="parent">
	<div class="inner">
		<div class="list">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</div>
</div>

CSS

body {
	overflow: hidden;
}

.parent {
	border: 2px solid blue;
	max-width: 100%;
	/* overflow-x: scroll; */
	padding: 0.5rem;
}

.inner {
	border: 2px solid green;
	max-width: 100%;
	overflow-x: scroll;
	padding: 0.5rem;
}

.list {
	border: 2px solid red;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	overflow-x: visible;
	padding: 0.5rem;
	position: relative;
	width: auto;
}

.item {
	background: #000;
	flex: 1 0 auto;
	height: 400px;
	width: 400px;
}