I am in the process of developing an image scroller (or possibly known as a carousel) where I have a horizontal element containing a child element that scrolls horizontally. My dilemma is that I want the parent element to have a width of 100%, while allowing the child element to overflow dynamically without a fixed width, enabling me to add as many elements as needed without specifying a set width.
Is this achievable? Currently, my attempt involves a scrollable element with a fixed width to enable overflow. Here is an example of my current progress:
https://jsfiddle.net/ahmadabdul3/xhhmtmgn/132/
<div class='parent'> width here is 100%
<div class='horizontal-scroll'> width here is anything, depends on how many items are inside
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
This outlines the basic structure of the HTML for this project.