title: TailwindCSS - Set flex child width to fill up whole parent width
body: <p>I have this react component:</p>
  <pre class="lang-js prettyprint-override"><code>const Status = () =&gt; {
    return (
      &lt;div className='h-screen bg-gray-800 flex justify-center items-center p-16'&gt;
        &lt;div className='bg-gray-700 px-8 py-4 rounded w-full'&gt;
          &lt;h2 className='text-2xl text-gray-100 font-medium'&gt;Plex Server&lt;/h2&gt;
          &lt;h3 className='text-base text-gray-400'&gt;Added 22/10/2021&lt;/h3&gt;
          &lt;div className='flex flex-row w-full space-x-1 my-4'&gt;
            {[...Array(30)].map((i, idx) =&gt; (
              &lt;div key={idx} className='h-8 w-1 bg-green-400 rounded'&gt;&lt;/div&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Status;
  </code></pre>
  <p>I'm using it to render 30 flex children with hard-coded width of 4px (<code>w-1</code> class). Here is the result:</p>
  <p><a href="https://i.stack.imgur.com/rj1rS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rj1rS.png" alt="snippet result" /></a></p>
  <p>Is there a way <strong>to set children width automatically</strong> so it would fill up parent space equaly?</p>
  <p>For example: parent width is 100px and this time I want to render only 10 elements. With current code it will take only 76px (40px from child width + 36px from 4px space between them). Is there a way to set children width automatically to ~6px?</p>