My code includes a div within another div, taking up 50% of the page's width:
<div id="mainContainer" class="mainContainer">
<div id="scroller" class="scrolling">
<!-- items here should make the div really long -->
</div>
</div>
The classes are configured as follows:
div.mainContainer{
width: 50%;
height: 50%;
}
div.scrolling{
width: 50%;
height: 10%;
overflow-x: scroll;
}
This setup should display a horizontal scrollbar when the number of items in the 'scroller' div exceeds its width. However, I have encountered an issue where items wrap onto the next line and the div scrolls vertically instead.
When the 'scrolling' div contains <div> elements rather than <p> or text, all elements are displayed on one line in other scenarios. So, it seems that applying overflow: scroll to divs with percentage widths doesn't work as expected. I attempted wrapping the <div> inside a <span> element with a width of 100%, but this approach also failed.
I experimented with calculating and setting the width using JavaScript in pixels, yet this method did not resolve the issue either. Additionally, changing width to max-width did not yield any results.
If you have any suggestions or insights on how to achieve horizontal scrolling for this div, please let me know!