JSFiddle - React, Tailwind, and code Playground

HTML

<flex class="horizontal">
  <flex-item>
    <p>Text</p> <p>Text</p> <p>Text</p>	<p>Text</p> <p>Text</p> <p>Text</p>
    <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p>
  </flex-item>
</flex>
<hr />
<flex class="vertical">
  <flex-item>
    <p>Text</p> <p>Text</p> <p>Text</p>	<p>Text</p> <p>Text</p> <p>Text</p>
    <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p> <p>Text</p>
  </flex-item>
</flex>

CSS

flex { display: flex; flex-direction: inherit; }
.horizontal { flex-direction: row; width: 100px; }
.vertical { flex-direction: column; height: 100px; }
flex-item { flex: 1 0 auto; background: lime; }
.horizontal flex-item { overflow-x: auto; }
.vertical flex-item { overflow-y: auto; }
.horizontal p { display: inline-block; }