Tailwind (v.2) Flex Width Not Growing or Shrinking

Question

I have a series of elements that I am attempting to fit into a panel, arranged in rows of 3, like so:

They should grow and shrink depending on screen width. Despite the parent having a class of flex & and the elements in question having classes of flex-grow, they are not adapting to the screen width and I can't figure out why. My code is as follows:

   <React.Fragment>
       <div className="flex">
           <className="flex flex-grow items-center justify-center w-20 h-8 mx-1 rounded-md border border-black-16 font-medium"/>
           <className="flex flex-grow items-center justify-center w-20 h-8 mx-1 rounded-md border border-black-16 font-medium"/>
           <className="flex flex-grow items-center justify-center w-20 h-8 mx-1 rounded-md border border-black-16 font-medium"/>
       </div>
   </React.Fragment>

Answer 1

use width-full in root elemment or width-8/12 if you dont want full width then it will adapt according to screen size

i have created two examples with flex and grid take a look this might help

or you can check here tailwind play

<script src="https://cdn.tailwindcss.com"></script>

<h2 class="font-semibold mx-auto w-full text-center p-3 capitalize border-b">with flex</h2>
<div class="w-full mx-auto flex flex-wrap text-center">
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    
</div>


<h2 class="font-semibold mx-auto w-full text-center p-3 capitalize border-b">with grid</h2>
<div class="grid grid-cols-3 text-center">
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
</div>