I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens.
Although I have applied the 'overflow' style to the div and set it to 'auto', the content always seems compressed within the div and the horizontal scrollbars do not appear as intended.
Is there a way to use a series of spans (or any other tag) followed by line breaks to define where the lines end and specify where the horizontal scrolling should initiate and stop?
<div style="overflow: auto">
<span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span>
<span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span>
<span>k</span> <span>l</span> <span>m</span> <span>n</span> <span>o</span>
<span>p</span> <span>q</span> <span>r</span> <span>s</span> <span>t</span>
<span>u</span> <span>v</span> <span>w</span> <span>x</span> <span>y</span>
<span>z</span>
<br>
<span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span>
<span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span>
<span>k</span> <span>l</span> <span>m</span> <span>n</span> <span>o</span>
<span>p</span> <span>q</span> <span>r</span> <span>s</span> <span>t</span>
<span>u</span> <span>v</span> <span>w</span> <span>x</span> <span>y</span>
<span>z</span>
<br>
<span>a</span> <span>b</span> <span>c</span> <span>d</span> <span>e</span>
<span>f</span> <span>g</span> <span>h</span> <span>i</span> <span>j</span>
<span>k</span> <span>l</span> <span>m</span> <span>n</span> <span>o</span>
<span>p</span> <span>q</span> <span>r</span> <span>s</span> <span>t</span>
<span>u</span> <span>v</span> <span>w</span> <span>x</span> <span>y</span>
<span>z</span>
<br>
</div>
What could be the issue with the absence of the scroll bar?https://i.sstatic.net/e49oq.png