Horizontal scrolling in mobile view in html/css

Question

I am working on a fiddle in which I want to horizontally scroll the contents in a mobile view.

At this moment in a desktop view, they are aligned in a straight line as shown below:

I want the above contents to scroll in a mobile view.

The CSS codes which I have used in order to align the contents in a straight line in a desktop view are:

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;


}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}

Problem Statement:

I am wondering what CSS codes I should add in the fiddle so that the contents present in the above screenshot scroll in a mobile view. I tried with overflow: scroll and white-space: nowrap but somehow I wasn't able to scroll the contents in mobile view.

Answer 1

Try adding flex none to the divs so that their size is preserved and a media query where you want desktop to start.

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}