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 -->
    </div>
</div>

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?

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 -->
    </div>
</div>

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?

• javascript
• html
• css

• change width to max-width – ControlAltDel Commented Oct 12, 2018 at 13:44
• That did not have any effect on the display. :/ – Harvey Fletcher Commented Oct 12, 2018 at 13:46

3 Answers 3

I think you want to force no-wrap to make that happen. borders added for visual size clarity

div.mainContainer{
    width:  50%;
    height: 50%;
    border: 1px solid;
}

div.scrolling{
    width:  50%;
    height: 10%;
    overflow-x: scroll;
    border: 1px solid;
    white-space: nowrap;
}

<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 modo 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>
    </div>
</div>

Instead of using a percentage, you could use vw (viewport width) when setting the width. Here's an example:

body {margin: 0;}
div {
    width: 100vw;
    height: 30px;
    background-color: red;
}

<div></div>

I put an example here. How you can see is there a p with scroll horizontal. Also you can put other elements. edit 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.
				</p>
				<div>
				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./thumbor/SOE2_mCo4BiW9ENumqhU220AEMk=/0x330:1577x1381/1200x800/filters:focal(0x330:1577x1381)/cdn.vox-cdn./uploads/chorus_image/image/33197419/122047293.0.jpg">
				</div>
    </div>
</div>