Skip to main content

​
Overview

.flex-grow lets an item absorb leftover space in the flex container. Apply it to the item that should expand while its siblings stay at their natural or fixed widths.
ClassCSS
.flex-growflex-grow: 1;

​
Single Grow Item

When only one item has .flex-grow, it absorbs all remaining space. This pattern works well for sidebar-plus-content layouts. 
<div class="elementor-element flex gap-4">
  <aside class="w-48 card p-4">
    Sidebar
  </aside>
  <main class="flex-grow card p-4">
    Content grows to fill the row.
  </main>
</div>

​
Multiple Grow Items

When two or more items share .flex-grow, they split the leftover space equally. This creates even-width columns without explicit width classes. 
<div class="elementor-element flex gap-4">
  <div class="flex-grow card p-4">
    Main
  </div>
  <div class="flex-grow card p-4">
    Aside
  </div>
</div>

​
Best Practices

  • Add .flex-grow only to the item that should absorb the leftover space.
  • Pair it with fixed-width siblings when you want a stable rail + fluid content pattern.
  • Combine with .flex-shrink decisions when dense layouts need controlled compression.

Flex Basis

Set starting main-axis size before grow runs

Flex Shrink

Control how items contract in tight spaces

Order

Reorder flex items when needed