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 class="container horizontal-scrollable" style="border: 1px solid lime;">
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
</div>
[Works, thus container is crollable while navigation is still][1] [1]: https://i.sstatic.net/vYKUY.png [Stopped working after some breakpoint, whole page is moving][2] [2]: https://i.sstatic.net/IgnTZ.png
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.