[SOLVED] Tailwind flex-grow not expanding to the remaining screen space

Tailwind flex-grow not expanding to the remaining screen space

I am trying to display three columns as inline using flex class of tailwind css (I am fairly new to tailwind). While doing so, the third column is not expanding to the full width of the screen.

Here is my HTML snippet -

<div class="container flex flex-row w-screen">
    <div class="basis-1/5"></div>
    <div class="basis-1/5"></div>
    <div class="flex-grow"></div>
</div>

Up until 1280px of width size, everything is working as intended. Above 1280px, I am getting this issue.

I have tried using flex-1 as well, but the issue persisted.

Here is the screenshot of the page

Kindly let me know if you need any further information on the issue.

Solution

Consider removing the container class. This class has max-width declarations applied preventing the element it is applied to from respecting its width property:

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

<div class="flex flex-row w-screen">
  <div class="basis-1/5 h-10 bg-red-200"></div>
  <div class="basis-1/5 h-10 bg-red-300"></div>
  <div class="flex-grow h-10 bg-red-400"></div>
</div>