JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div>1.overflow-x: auto, y: auto</div>
  <div id='ctnr-1' class='ctnr'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div>
  <div>2.overflow-x: auto, y: hidden</div>
  <div id='ctnr-2' class='ctnr'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div>
  <div>3.overflow-x: scroll, y: auto</div>
  <div id='ctnr-3' class='ctnr'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div>
  <div>4.overflow-x: scroll, y: hidden</div>
  <div id='ctnr-4' class='ctnr'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

html {
  height: 100%;
  box-sizing: border-box;
}
*, *:before, *:after{
  box-sizing: inherit;
  outline: none;
}
.ctnr {
  display: flex;
  flex-flow: column wrap;
  background: orange;
  width: 400px;
  height: 225px;
  margin: 1rem;
}

#ctnr-1 {
  overflow-x: auto;
  overflow-y: auto;
}

#ctnr-2 {
  overflow-x: auto;
  overflow-y: hidden;
}

#ctnr-3 {
  overflow-x: scroll;
  overflow-y: auto;
}

#ctnr-4 {
  overflow-x: scroll;
  overflow-y: hidden;
}

.ctnr div {
  min-height: 80px;
  flex: 1 1 auto;
  width: 45%;
  margin: 0;
  border: 1px solid blue;
  background: lightblue;
}