JSFiddle - React, Tailwind, and code Playground

by speedfox

HTML

The blue boxes should be flush against each other vertically

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>
<br>
When there's a whole bunch it works correctly
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>

CSS

.container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}