<div class="carouselWrapper">
  <div class="carouselContainer">
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FFFF00/000000/?text=Carousel+Item+21" alt="" />
    </div>
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FF0000/FFFFFF/?text=Carousel+Item+22" alt="" />
    </div>
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/00FF00/000000?text=Carousel+Item+23" alt="" />
    </div>
  </div>
</div>
.carouselWrapper {
  position: relative;
}

.carouselContainer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .carouselItem {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.