How to show custom horizontal scrollbar on mobile?

I've made a custom horizontal scrollbar in elementor with custom css, it works for desktop view but it doesn't work for mobile view, what am I missing? the following is the custom css that I use

.scroller-card {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    flex-basis: 300px;
    border-radius: var(--whiskey-radius);
    margin: 8px;
    padding: 16px;
    color: var(--whiskey-color);
    background-color: var(--whiskey-panel-background);
    transition: all 150ms ease-out;
}
.scroller-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transform-style: preserve-3d;
    perspective: 800px;
    padding: 24px 0;
}

*, *:before, *:after {
    box-sizing: auto;
}

.scroller-cards::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
}

.scroller-cards::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #0F2B4A;
    background: #0F2B4A;
    border-radius: 16px;
    opacity: .5;
}

Here are the results

I'm still new to coding so please help

Solution

Remove flex-wrap on screen below 1024px.

Reason: On screen below 1024px, cards moved on next line and content width of container is not greater than you container max width. That's why scroll is not applying