Cacher is the code snippet organizer for pro developers

/*
[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; 
}