JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test1">
 <div class="flexparent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
 </div>
</div>
<div class="test2">
 <div class="flexparent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
 </div>
</div>

CSS

/*  using flex-grow  */
.test1 .flexparent div:nth-child(1),
.test1 .flexparent div:nth-child(2) {
  flex-grow: 1;
  background: #aaf;
}
.test1 .flexparent div:nth-child(n+3) {
  flex-grow: 2;
}

/*  using flex-basis  */
/* four items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(4),
.test2 .flexparent div:first-child:nth-last-child(4) + div {
  flex-basis: calc(100% / 3 / 2);
  background: #0c0;
}
/* four items, last 2 */
.test2 .flexparent div:first-child:nth-last-child(4)  + div ~ div {
  flex-basis: calc(100% / 3);
}
/* five items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(5),
.test2 .flexparent div:first-child:nth-last-child(5) + div {
  flex-basis: calc(100% / 4 / 2);
  background: #0c0;
}
/* five items, last 3 */
.test2 .flexparent div:first-child:nth-last-child(5)  + div ~ div {
  flex-basis: calc(100% / 4);
}
/* six items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(6),
.test2 .flexparent div:first-child:nth-last-child(6) + div {
  flex-basis: calc(100% / 5 / 2);
  background: #0c0;
}
/* six items, last 4 */
.test2 .flexparent div:first-child:nth-last-child(6)  + div ~ div {
  flex-basis: calc(100% / 5);
}
/* seven items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(7),
.test2 .flexparent div:first-child:nth-last-child(7) + div {
  flex-basis: calc(100% / 6 / 2);
  background: #0c0;
}
/* seven items, last 5 */
.test2 .flexparent div:first-child:nth-last-child(7)  + div ~ div {
  flex-basis: calc(100% / 6);
}
/* eight items, first 2 */
.test2 .flexparent div:first-child:nth-last-child(8),
.test2 .flexparent div:first-child:nth-last-child(8) + div {
  flex-basis: calc(100% / 7 / 2);
  background: #0c0;
}
/* eight items, last 6 */
.test2 .flexparent div:first-child:nth-last-child(8)  + div ~ div {
  flex-basis: calc(100% / 7);
}

/* general styles */
.flexparent {
  display: flex;
}
.flexparent.nr2, .test2 {
  margin-top: 4px;
}
.flexparent div {
  min-width: 0;                     /* ...