Tailwind CSS: Make a Child Element Fill the Remaining Space

Updated: May 11, 2022 By: A Goodman One comment

In Tailwind CSS, you can use the flex-1 or grow utility class to force a child element to fill the remaining space on the main axis of a flex container. The child element will expand as much as possible and occupy the free area.

Example

In this example, the size of the amber box can be expanded or reduced to fill the empty space of its parent (the part with the sky color). Meanwhile, the size of the green and red (rose) boxes is unchanged.

Preview:

The code

This code uses the grow utility:

<body class="p-10">
   <div class="flex w-full h-96 p-5 bg-sky-300">
       <div class="w-24 h-full bg-green-500"></div>
       <div class="w-36 h-full ml-5 bg-rose-500"></div>
       <div class="grow h-full ml-5 bg-amber-500"></div>
   </div>
</body>

You can achieve the same result with the flex-1 utility:

<body class="p-10">
   <div class="flex w-full h-96 p-5 bg-sky-300">
       <div class="w-24 h-full bg-green-500"></div>
       <div class="w-36 h-full ml-5 bg-rose-500"></div>
       <div class="flex-1 h-full ml-5 bg-amber-500"></div>
   </div>
</body>

If you’re making a layout on the VERTICAL axis, try this code:

<body>
   <div class="flex flex-col w-full h-screen p-5 bg-sky-300">
       <div class="w-full h-12 bg-green-500"></div>
       <div class="w-full h-36 mt-5 bg-rose-500"></div>
       <div class="grow w-full mt-5 bg-amber-500"></div>
   </div>
</body>

That’s it. Continue learning more about Tailwind CSS and CSS by taking a look at the following articles: