Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

In my code, I have a div, which is inside another div, taking up 50% of the page

<div id="mainContainer" class="mainContainer">
    <div id="scroller" class="scrolling">
        <!-- items here should make the div really long -->
and I have my classes configured like this:
div.mainContainer{
    width:  50%;
    height: 50%;
div.scrolling{
    width:  50%;
    height: 10%;
    overflow-x: scroll;
Which should mean, that when there are many items in the scroller div, that a scrollbar appears and it can scroll left and right. However, I have found that the items get pushed onto the next line, and the div scrolls vertically.
scrolling div contains <div> and not <p> or any other text, I have tested that when the <div> tags within are elsewhere, they all display on the same line. They do.
After doing some research, from what I understand, you can't put overflow: scroll on divs with % widths. So I tried to put the <div> inside a <span> with width of 100%, but this didn't work.
I also tried measuring the width and setting it as "px" amount using JavaScript, but this had no effect.
In addition, I changed width to max-width - no effect.
How can I get this div scrolling horizontally?
<div id="mainContainer" class="mainContainer">
    <div id="scroller" class="scrolling">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                wrapping the text in another div doesn't change the functionality here, but if you have styles on that div they could be interfering with the parent styles
– D Lowther
                Oct 12, 2018 at 14:17
I put an example here. 
How you can see is there a p with scroll horizontal. Also you can put other elements.
I put anther element with text and image, how you can see, it's scrollable
div.mainContainer{
    width:  100%;
    height: 100%;
div.scrolling{
    max-width:  50%;
    height: 10%;
   overflow: auto;
p.text{
	white-space: nowrap;
 overflow: auto;
#scroller>div{
	overflow: auto;
  border: 6px solid red;
	white-space: nowrap;
  overflow: auto;
<div id="mainContainer" class="mainContainer">
    <div id="scroller" class="scrolling">
        <p class="text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi nec diam convallis lacinia. Suspendisse feugiat tincidunt felis, eleifend finibus odio sodales tempor. Donec tempor diam sem, ac hendrerit orci ullamcorper quis. Ut tempus nec nunc at bibendum. Nulla vulputate nisl sit amet dapibus scelerisque. Nulla facilisi. Nam bibendum nec felis quis lobortis. Sed porta convallis sapien, ac fringilla quam maximus efficitur. Sed et mi ut lorem iaculis consectetur et et dui. Cras sit amet mi non augue viverra facilisis. Aenean pretium cursus consequat. Quisque cursus fringilla facilisis. Donec vel eros tellus. Nunc non nibh nibh. Sed pretium laoreet lectus eget blandit.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi nec diam convallis lacinia. Suspendisse feugiat tincidunt felis, eleifend finibus odio sodales tempor. Donec tempor diam sem, ac hendrerit orci ullamcorper quis. Ut tempus nec nunc at bibendum. Nulla vulputate nisl sit amet dapibus scelerisque. Nulla facilisi. Nam bibendum nec felis quis lobortis. Sed porta convallis sapien, ac fringilla quam maximus efficitur. Sed et mi ut lorem iaculis consectetur et et dui. Cras sit amet mi non augue viverra facilisis. Aenean pretium cursus consequat. Quisque cursus fringilla facilisis. Donec vel eros tellus. Nunc non nibh nibh. Sed pretium laoreet lectus eget blandit.<br>
				<img src="https://cdn.vox-cdn.com/thumbor/SOE2_mCo4BiW9ENumqhU220AEMk=/0x330:1577x1381/1200x800/filters:focal(0x330:1577x1381)/cdn.vox-cdn.com/uploads/chorus_image/image/33197419/122047293.0.jpg">
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.