Bootstrap 5 Horizontal Scroll for Multiple Rows-CodePudding

Container is scrollable only for half of the container. After that scrolling starts to affect navigation panel as well.

CSS:

  .horizontal-scrollable {
        overflow-x: auto;
        white-space: nowrap;
    }

HTML:

<div  style="border: 1px solid lime;">
    <div   style="border: 5px solid gold">
        <div  style="border: 1px solid red;">Column</div>
        <div  style="border: 1px solid red;">Column</div>
        <div  style="border: 1px solid red;">Column</div>
            <div  style="border: 1px solid red;">Column</div>
        </div>
    <div   style="border: 5px solid gold">
        <div  style="border: 1px solid red;">Column</div>
        <div  style="border: 1px solid red;">Column</div>
        <div  style="border: 1px solid red;">Column</div>
            <div  style="border: 1px solid red;">Column</div>
        </div>
    <div   style="border: 5px solid gold">
        <div  style="border: 1px solid red;">Column</div>
        <div  style="border: 1px solid red;">Column</div>
            <div  style="border: 1px solid red;">Column</div>
            <div  style="border: 1px solid red;">Column</div>
        </div>
</div>

[Works, thus container is crollable while navigation is still][1] [1]: https://i.stack.imgur.com/vYKUY.png [Stopped working after some breakpoint, whole page is moving][2] [2]: https://i.stack.imgur.com/IgnTZ.png

CodePudding user response：

You can try to make all the row div elements as inline, using display: inline-block; property.

For your case, it would be like

.horizontal-scrollable > .row > .col{
            display: inline-block;
}

Also, try changing the code from Horizontal-scrollable to the the row elements inside that div.

  .horizontal-scrollable > .row {
        overflow-x: auto;
        white-space: nowrap;
    }

I found the this to be working for me. You can reference this here.