flex-grow
Determines how much remaining space a flex item takes up. fg0 is the default and takes no space, while fg1 fills all remaining space.
Class List
| Class | CSS | Description |
|---|---|---|
fg0 | flex-grow: 0 | Does not take remaining space (default) |
fg1 | flex-grow: 1 | Takes all remaining space |
fg2 | flex-grow: 2 | Takes space at 2x ratio compared to other items |
fgu | flex-grow: unset | Resets the flex-grow value |
Visual Comparison
Compares how items fill remaining space based on flex-grow values.
All fg0 (default) -- Does not fill remaining space
Items only take up their content size, leaving empty space on the right
Item 2 with fg1 -- Takes all remaining space
Item 2 takes up all remaining space
fg1 vs fg2 -- Space distribution by ratio
fg1:fg2 = 1:2 ratio for dividing remaining space
Practical Pattern: Sidebar Layout
Fixed-width sidebar + main content that fills remaining space pattern. Use fs0 w25rem to fix the sidebar size, and fg1 for the main to fill the rest.
fs0 w25rem + fg1 combination
<!-- Sidebar + Main Content -->
<div class="df gap16px">
<aside class="fs0 w25rem bg18181B p2rem br8px">
Sidebar (Fixed 250px)
</aside>
<main class="fg1 bg27272A p2rem br8px">
Main content (fills remaining space)
</main>
</div>
<!-- Search bar Pattern -->
<div class="df gap8px">
<input class="fg1 py8px px16px bg18181B b1pxsolid27272A br4px" placeholder="Enter search term" />
<button class="fs0 py8px px16px bg6366F1 cFFFFFF br4px bn cp">Search</button>
</div>Class Details
fg0flex-grow: 0
Default value. Item does not take remaining space and only occupies its content size (or specified width).
<!-- Default: takes up only content size -->
<div class="df gap8px">
<span class="fg0 bg18181B p12px br4px">Fixed</span>
<span class="fg0 bg18181B p12px br4px">Fixed</span>
<span class="fg0 bg18181B p12px br4px">Fixed</span>
</div>
<!-- Disable grow in responsive -->
<div class="fg1 sm-fg0">Fills space on desktop only</div>fg1flex-grow: 1
The most commonly used value. Fills all remaining space with no gaps. If multiple items all have fg1, they share space equally.
<!-- Fill remaining space -->
<div class="df gap8px">
<span class="bg18181B p12px br4px">Fixed</span>
<span class="fg1 bg6366F1 cFFFFFF p12px br4px">All remaining (fg1)</span>
</div>
<!-- Equal distribution -->
<div class="df gap8px">
<span class="fg1 bg18181B p12px br4px">1/3</span>
<span class="fg1 bg18181B p12px br4px">1/3</span>
<span class="fg1 bg18181B p12px br4px">1/3</span>
</div>fg2flex-grow: 2
Takes remaining space at 2x ratio compared to other items. When used with fg1, space is distributed at a 1:2 ratio.
<!-- 1:2 ratio distribution -->
<div class="df gap8px">
<div class="fg1 bg18181B p12px br4px">fg1 (1/3)</div>
<div class="fg2 bg6366F1 cFFFFFF p12px br4px">fg2 (2/3)</div>
</div>
<!-- 1:2:1 ratio -->
<div class="df gap8px">
<div class="fg1 bg18181B p12px br4px">fg1</div>
<div class="fg2 bg6366F1 cFFFFFF p12px br4px">fg2</div>
<div class="fg1 bg18181B p12px br4px">fg1</div>
</div>fguflex-grow: unset
Resets the flex-grow value. Used to remove flex-grow set by parent or other rules, or to disable grow at specific breakpoints in responsive layouts.
<!-- Reset grow in responsive -->
<div class="df gap8px">
<span class="fg1 md-fgu bg18181B p12px br4px">
Desktop: fill space / Tablet: reset
</span>
</div>Tips & Notes
fg1 is used most often
In most cases, fg1 alone is sufficient. Means "fill remaining space" and is used in sidebar layouts, search bars, navigation, etc.
fg0 is the default and usually omitted
Since the default value of flex-grow is 0, there is rarely a need to explicitly use fg0. Used to disable grow in responsive layouts.
Higher number means more space
fg1:fg2 = 1:2 ratio, fg1:fg3 = 1:3 ratio for dividing remaining space. In practice, fg1 and fg2 are usually sufficient.
Remember the fs0 + fg1 combination
Fix elements with fs0(flex-shrink: 0) to prevent shrinking, and use fg1 for flexible elements to fill the rest. This is the most common pattern.