I have a group of divs in my list, here's an example:
.container {
display: flex;
flex-direction: row;
justify-content: center;
}When the container is larger than the viewport upon resizing, the first/second items get clipped off. I would like to implement a horizontal scrollbar under the items without changing the markup, and ensure that the items are left-aligned correctly so as not to cut off the initial ones.
The justify-content: center; property keeps the divs centered, but I need them aligned left when the container exceeds the viewport size.
Is there a way to achieve this? View the code on this JSFiddle link.