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;
}

The correct HTML attribute for linking to styles is class, not className — Brett Donald
– Brett Donald, Commented May 25, 2022 at 23:47
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
– Thi Nguyen, Commented May 26, 2022 at 23:51

Brett Donald · Accepted Answer · 2022-05-25 23:45:57Z

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>

Aragan · Accepted Answer · 2022-05-25 22:51:46Z

2

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;
}

edited May 25, 2022 at 22:51

answered May 25, 2022 at 22:50

Aragan

913 bronze badges

1 Comment

Thi Nguyen Over a year ago

Yes it makes sense. It worked when I tried it. Thank you so much!

Collectives™ on Stack Overflow

horizontal scroll for overflow-x not working in mobile view

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related