<div class="container">
  <h1>overflow-x: scroll</h1>
  <div class="content-container">
    <div class="col-container">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</div>
.content-container{
  height: 300px;
  overflow-x: scroll;
}

h1{
  background: black;
  color: #fff;
  margin: 0;
  padding: 10px;
}

.container{
  max-width: 400px;
  margin: 40px auto;
  border:1px solid black;
}


.col-container{
  width: 1200px;
}
.col{
  float:left;
  width: 300px;
  height: 280px;
  background:red;
  outline: 1px solid black;
}
.col:nth-child(2){
  background: blue;
}
.col:nth-child(3){
  background: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.