Skip to main content

Documentation Index

Fetch the complete documentation index at: https://skelementorcss.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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="card padding-4" style="width: 12rem;">
    Sidebar
  </aside>
  <main class="flex-grow card padding-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 padding-4">
    Main
  </div>
  <div class="flex-grow card padding-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