JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
    <div class="grand-child">a</div>
    <div class="grand-child">b</div>
    <div class="grand-child">c</div>
    <div class="grand-child">d</div>
  </div>
</div>

CSS

.child {
  background: red;
  width:100%;
  height:100px;
  overflow:scroll;
  white-space: nowrap;
}
.grand-child {

  display: inline-block;
  min-width: 300px;
  height: 100px;
  overflow-x: hidden;
}