JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
    <div class="grand-child"></div>
    <div class="grand-child"></div>
    <div class="grand-child"></div>
    <div class="grand-child"></div>
  </div>
</div>

CSS

.parent {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-x: auto;
}
.child {
  display: flex;
  flex-flow: row nowrap;
  background: red;
}
.grand-child {
  flex-shrink: 0;
  display: block;
  align-items: center;
  padding: .54rem 1.05rem;
  width: 300px;
  height: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}