Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
.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;
                oh I forgot to mention that I use JSX. but your suggestion of white-space:nowrap is a good start for me. Thank you. It makes total sense to me.
– Thi Nguyen
                May 26, 2022 at 23:51
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>
The parent element will only be scrollable if the child element is larger than it, so you may need to add a width or min-width to your .details element. Currently it is just the width of its parent container and so your window will be scrollable on a screen narrower than 650px but the actual element wont.
For a simple scroll on mobile the following widths setup should work:
.details-container {
  width: 100%;
.details {
  min-width: 650px;
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.