horizontal scroll for overflow-x not working in mobile view

Question

I have a div details like this, and I tried to make it horizontally scrollable in mobile view, but it doesn't work. I'm not sure what I did wrong with my code.

<div className="details-container" >
    <div className="details">
        <div>items</div>
        <div>items</div>
        <div>items</div>
        <div>items</div>
    </div>
</div>

.details-container {
    width: 650px;
    padding: 1rem;
    padding-top: 0;
    font-size: 1rem;
    height: fit-content;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    overflow-x: scroll;
}

.details {
    padding: 1rem;
    border: solid black 1px;
    background-image: url("../../../../assets/images/background/reportBackground.png");
    background-repeat: no-repeat;
    object-fit: contain;
    background-position: bottom;
}

Answer 1

For a start, your content needs to be wide enough to require scrolling. One technique for doing this is to use white-space: nowrap; to prevent your content wrapping to the next line, like this:

.details-wrapper {
    background-image: url(https://thelandscapephotoguy.com/wp-content/uploads/2019/01/landscape%20new%20zealand%20S-shape.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 1em 1em 0;
}
.details {
    overflow: auto;
    white-space: nowrap;
    color: white;
    padding-bottom: 1em;
}

<div class="details-wrapper">
    <div class="details">
        <div>this text is long and set not to wrap, so if we style it not to wrap then we should also be able to style it to scroll horizontally</div>
        <div>this text is long and set not to wrap, so if we style it not to wrap then we should also be able to style it to scroll horizontally</div>
        <div>this text is long and set not to wrap, so if we style it not to wrap then we should also be able to style it to scroll horizontally</div>
        <div>this text is long and set not to wrap, so if we style it not to wrap then we should also be able to style it to scroll horizontally</div>
    </div>
</div>