CSS for a horizontally scrolling section with flexbox and smooth scrolling

horizontal-scroll.css

/* Right Column: Enables horizontal scrolling */
.your-right-column-class {
    overflow-x: auto;  /* Enables horizontal scrolling */
    white-space: nowrap;  /* Prevents content from wrapping */
    display: flex;  /* Ensures child elements stay in a row */
    scroll-behavior: smooth; /* Optional: Smooth scrolling effect */
}

/* Optional: Hide scrollbar (WebKit browsers) */
.your-right-column-class::-webkit-scrollbar {
    display: none;
}

/* Container: Expands width for smooth scrolling */
.your-container {
    display: flex;
    width: 400vw; /* Adjust depending on content */
}

/* Ensures each child element takes full viewport width */
.your-container > * {
    width: 100vw; /* Ensures each item is one viewport width */
}