I am attempting to create what is essentially a horizontally, infinitely scrollable div (up to inner content width). I want to stack other divs within said container, who will float next to each other horizontally.
In essence, a Horizontal Infinite Canvas: the user will be able to add items to the canvas, and scroll it from left to right. The scrollbar should simply grow as new items are added to the right.
Doing this vertically is quite easy: set a max-height, set overflow to scroll, finished.
Like this:
<div style="height: 95vh; max-height:95vh; border:5px solid green; overflow-y: scroll;">
<div style="position:relative; min-height: 2000px; height: 2000px; border: 2px solid black; overflow: hidden;">TEST 0</div>
<div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid white; ">TEST 1</div>
<div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid yellow;">TEST 2</div>
<div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid orange;">TEST 3</div>
<div style="position: relative; min-height: 2000px; height: 2000px; border: 2px solid blue;">TEST 4</div>
</div>However, horizontally? this does not seem easy to do... shouldn't the necessary parameters to create the "vertical infinite scrolling effect" simply apply to width, with an added float: left; on the inner div?
I have tried the following, which has not yielded any results, and for the life of me cannot figure out why... as you can see, they still stack horizontally.
<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll;">
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black; display:inline; float:left;">TEST 0</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white; display: inline; float: left; vertical-align:top; ">TEST 1</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow; display: inline; float: left; ">TEST 2</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange; display: inline; float: left; ">TEST 3</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue; display: inline; float: left; ">TEST 4</div>
</div>Can someone please explain this one to me: How do you accomplish a side-scrolling, infinite scroller container div?
Adding display: flex to the parent will fix your issue, don't forget to remove all floats from the children.
Try to avoid float as much as you can, it's an old property and there are much better approaches to achieving whatever you want in more elegant ways such as Flexbox or Grid.
<div style="width: 95vw; max-width:95vw; border:5px solid green; overflow-x: scroll;display: flex;height: 100px">
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid black; display:inline;">TEST 0</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid white; display: inline; vertical-align:top; ">TEST 1</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid yellow; display: inline; ">TEST 2</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid orange; display: inline; ">TEST 3</div>
<div style="position: relative; min-width: 2000px; width: 2000px; border: 2px solid blue; display: inline; ">TEST 4</div>
</div>Check this article for more about floats: Is CSS float deprecated?