CSS
Responsive Horizontal Scrolling Flexbox List
Build a responsive horizontal scrolling list using Flexbox, perfect for displaying a series of items like tags or cards without wrapping them onto new lines.
.scroll-container {
display: flex;
overflow-x: auto; /* Enables horizontal scrolling */
-webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
gap: 15px; /* Space between items */
padding: 10px;
border: 1px solid #ccc;
white-space: nowrap; /* Prevents items from wrapping */
max-width: 100%; /* Ensure container respects parent width */
}
.scroll-item {
flex: 0 0 auto; /* Prevent items from growing/shrinking and set flex-basis to auto */
width: 150px; /* Fixed width for demonstration */
height: 100px;
background-color: #ffe0b2;
border: 1px solid #ff9800;
display: flex;
justify-content: center;
align-items: center;
color: #5d4037;
font-weight: bold;
}
How it works: This snippet creates a responsive horizontal scrolling list using Flexbox. The `overflow-x: auto` property enables scrolling when content exceeds the container's width. `white-space: nowrap` prevents flex items from wrapping to the next line. `flex: 0 0 auto` ensures items maintain their defined width without shrinking or growing, making them suitable for a scrollable display. `gap` provides consistent spacing between items, enhancing readability and user experience for carousels or tag clouds.