Here is the HTML and CSS code to create a scrollable list of elements on a webpage. Currently, there is an issue where the paragraph data tag gets cut off when applying the overflow-x property. I have a div element containing image and paragraph tags with overflow properties set for the container.
<div class="container-fluid scrollmenu">
<div class="row text-centre">
<div class="scroll-data">
<div class="col-xs-4 col-sm-6 col-md-4">
<img class="d-block w-100 card-img-top" src="./Images/banner-1.jpg" alt="First slide">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
... (additional code for other items) ...
</div>
</div>
</div>
Css
.container-fluid .row .scroll-data {
overflow-x:auto;
white-space: nowrap;
display: flex;
}
.container-fluid .row .scroll-data .col-xs-4 p {
word-wrap: break-word;
color: blueviolet;
}