JSFiddle - React, Tailwind, and code Playground

by phyle5

HTML

<div class="main" >
  <div class="nogrow" style="background-color:coral;">dsfddsfdfA</div>
  <div class="nogrow" style="background-color:lightblue;">dfdfdfdB</div>
  <div class="nogrow" style="background-color:khaki;">dfdfdf d fd fdC</div>
  <div class="nogrow" style="background-color:pink;">Ddssd sdf sdf</div>
  <div class="nogrow" style="background-color:lightgrey;"> df df df ddf dfE</div>
  <div class="nogrow" style="background-color:lightgreen;"> dfd fd df dfdF</div>
</div>

CSS

.main {
  border: 10px solid red;
  padding:10px;
  display: flex;
  flex-flow: wrap;
  background-color:yellow!important;
}

 .main div {
 
  flex-grow: 1;
  border: 1px solid black;
}

.main div.nogrow{
  flex-grow: 0;
  }