horizontal scroll for overflow-x not working in mobile view-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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 new zealand S-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 >
    <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>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>