/*
[1]: Make a flex container so all our items align as necessary
[2]: Prevent items from wrapping
[3]: Automatic overflow means a scroll bar won’t be present if it isn’t needed
[4]: Make it smooth scrolling on iOS devices
[5]: Hide the ugly scrollbars in Edge until the scrollable area is hovered
[6]: Hide the scroll bar in WebKit browsers
*/
.scroll {
display: flex; /* [1] */
flex-wrap: nowrap; /* [1] */
overflow-x: auto; /* [1] */
-webkit-overflow-scrolling: touch; /* [4] */
-ms-overflow-style: -ms-autohiding-scrollbar; /* [5] */
}
/* [6] */
.scroll::-webkit-scrollbar {
display: none;
}
/*
CSS: for the items
Each item needs a flex-grow and flex-shrink value of 0. The flex-basis property can be a percentage or pixel value if you for some reason need items to be of a specific width.
*/
.item {
flex: 0 0 auto;
}