JSFiddle - React, Tailwind, and code Playground

by Victor Osório

HTML

<body>
  <div class="scroller">
    <div>
      <div class="div-1">
        1
      </div>
      <div class="div-2">
        2
      </div>
      <div class="div-3">
        3
      </div>
      <div class="div-4">
        4
      </div>
      <div class="div-5">
        5
      </div>
      <div class="div-6">
        6
      </div>
      <div class="div-7">
        7
      </div>
      <div class="div-8">
        8
      </div>
      <div class="div-9">
        9
      </div>
      <div class="div-10">
        10
      </div>
      <div class="div-11">
        11
      </div>
    </div>
  </div>

CSS

.scroller {
  background: red;
  display: block;
  height: 150px;
  max-width: 300px;
  overflow-x: auto;
}

.scroller > div {
  height: 100%;
  display: table;
}

.scroller > div > div {
  display: table-cell;
  min-width: 250px;
  border: solid 1px red;
}

JavaScript

(function() {
  var scroller = document.getElementsByClassName('scroller')[0];
  scroller.scrollLeft = scroller.scrollWidth / 2;
})();