I'm trying to create a CSS theme for a blog (which I cannot change the HTML of). I want to make the entries go in columns (of which there is no set number), and have a horizontal slide to be able to slide through the posts; the columns will be the same size and they will be filled.
Unfortunately, after writing out the code, I have found a strange bug - when I use overflow: scroll, some columns somehow get cut off. I have made an example of this here - after several columns, with more entries to go, the text starts getting cut off, even where there's more left.
What I've noticed is that it is not dependent on the number of columns - if the width of the columns is smaller, there will be more columns. The cutoff point seems to be arbitrarily determined, but I have no idea why or how.
Is there a way to fix this? I've searched a lot for a solution, but all I've found are questions about disappearing scroll bars, not disappearing content.
So far, I have only seen this in Chrome. I have tested it on Internet Explorer, Firefox, and Safari, and it works on all of those three, but not Google Chrome. This seems to only happen in some versions of Chrome - a Chromebook user reported that the CSS was, indeed, working on his device.
div #entries{
height: 60vh;
column-width: 40vw;
overflow-x: scroll;
}<div id="container to keep in">
<div id="entries">
<div class="entry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia scelerisque mauris, sit amet rutrum est. Donec placerat, arcu in feugiat fringilla, justo neque bibendum odio, feugiat efficitur ex turpis in nulla. Proin cursus rutrum nunc eget egestas. Quisque interdum ultrices orci in posuere. Integer enim nunc, euismod tempor blandit eu, molestie vitae libero. Morbi erat dolor, congue non arcu et, iaculis dictum orci. Curabitur id tellus et eros rutrum luctus vitae sed velit. Integer vestibulum quam arcu, ut malesuada eros rutrum nec. Etiam ullamcorper ultrices libero, vel euismod mauris mollis vitae. Vivamus et nisl eget nulla euismod bibendum id sed augue. Vestibulum ultricies non felis sollicitudin elementum. Fusce sed diam aliquet est volutpat placerat vitae sit amet ante.
Anean eget egestas dui. Curabitur tristique ullamcorper augue, sit amet tristique nibh dapibus non. In ut sodales felis, et dictum diam. Cras ornare libero vitae quam laoreet, et rutrum purus luctus. Aenean tincidunt elit vel nibh facilisis euismod. In tempor erat tellus, in convallis nisi lacinia in. Etiam pulvinar finibus elit sit amet tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac fermentum nisl. Donec cursus purus at libero egestas volutpat. Nullam tincidunt lectus eu purus dignissim scelerisque.
</div>
<div class="entry">
Aliquam tempus nibh volutpat arcu semper pulvinar. Donec nec mauris nec metus dapibus auctor. Vestibulum eu tincidunt sem, sit amet auctor neque. Nulla ut enim diam. Donec est orci, pharetra id sapien eget, dictum blandit arcu. Suspendisse tempus consectetur aliquet. Donec eget consectetur enim, eu tincidunt diam. Morbi mi tellus, mattis eget velit ut, pretium scelerisque diam. Proin ut tortor hendrerit, elementum turpis sit amet, tempor mauris. Nunc semper ex quis augue vulputate, non molestie velit tincidunt. Maecenas faucibus augue dui, in condimentum lectus pellentesque eu.
</div>
<div class="entry">
Nulla eu ante nec lorem malesuada bibendum. Maecenas egestas mi et ornare mollis. Integer sed risus nulla. Aenean nunc nunc, pretium in elit vitae, semper maximus enim. Nulla dignissim vestibulum tellus sit amet fringilla. Nulla convallis, eros quis malesuada cursus, velit augue consequat eros, et tincidunt lacus mauris ut enim. Quisque facilisis magna facilisis eleifend maximus. In vel scelerisque turpis. Curabitur tempor libero diam, vitae pretium ex finibus sed.
Quisque dui justo, ultrices in velit in, vulputate sollicitudin turpis. Morbi sem velit, interdum a risus vitae, molestie sodales urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in lacus sapien. Sed mattis maximus dui, vitae rhoncus sapien sodales sed. Ut malesuada, urna et varius varius, mauris neque viverra diam, ut rhoncus sem magna ut purus. Phasellus vestibulum aliquet elit tempor mattis. Phasellus venenatis, velit a tempus viverra, nisl arcu mattis nibh, a molestie lectus ligula vel lacus.
</div>
</div>
</div>
