|

CSS 26 💻 flex-grow, flex-shrink properties

Bykronos

These two properties control how flex items grow to fill available space and shrink when there isn’t enough space. They’re essential for creating flexible, responsive layouts.

Overview of Properties

PropertyDescriptionDefaultValues
flex-growHow much an item can grow relative to siblings0Number (e.g., 1, 2, 3)
flex-shrinkHow much an item can shrink relative to siblings1Number (e.g., 0, 1, 2)

1. flex-grow

The flex-grow property specifies the grow factor — how much an item can grow relative to its siblings when there’s available space.

.item1, .item3 {
    flex-grow: 1; /* Each takes 1 share */
}

.item2 {
    flex-grow: 2; /* Takes 2 shares */
}

How It Works

The available space is divided among items based on their grow factors:

Total grow factors = 1 + 2 + 1 = 4

Item 1: 1/4 of available space (25%)
Item 2: 2/4 of available space (50%)
Item 3: 1/4 of available space (25%)

Values

ValueDescriptionExample
0Item does not grow (default)flex-grow: 0;
1Item grows to fill available spaceflex-grow: 1;
2Item grows twice as much as flex-grow: 1flex-grow: 2;
3+Higher values grow moreflex-grow: 3;

Important: flex-grow only applies when there is extra space in the container. If items already fill the container, flex-grow has no effect.

2. flex-shrink

The flex-shrink property specifies the shrink factor — how much an item can shrink relative to its siblings when there isn’t enough space.

.item4, .item5 {
    flex-shrink: 1; /* Each shrinks by 1 share */
}

.item6 {
    flex-shrink: 2; /* Shrinks by 2 shares */
}

How It Works

When the total size of items exceeds the container, items shrink based on their shrink factors:

Total shrink factors = 1 + 1 + 2 = 4

Item 4: 1/4 of the overflow is removed (25% shrink)
Item 5: 1/4 of the overflow is removed (25% shrink)
Item 6: 2/4 of the overflow is removed (50% shrink)

Values

ValueDescriptionExample
0Item does not shrinkflex-shrink: 0;
1Item shrinks proportionally (default)flex-shrink: 1;
2Item shrinks twice as much as flex-shrink: 1flex-shrink: 2;
3+Higher values shrink moreflex-shrink: 3;

Important: flex-shrink only applies when items overflow the container. If there’s enough space, flex-shrink has no effect.

flex-grow vs flex-shrink

Aspectflex-growflex-shrink
When it appliesWhen there’s extra spaceWhen there’s not enough space
EffectItems get biggerItems get smaller
Default0 (no growth)1 (can shrink)
Higher valueGrows moreShrinks more
Value 0Won’t growWon’t shrink

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow and flex-shrink Properties</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== FLEX CONTAINERS ====== */
        .container {
            display: flex;
            border: 2px solid #333;
            margin: 15px 0;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            gap: 10px;
        }

        .item {
            height: 100px;
            border: 3px solid #6c5ce7;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .item1 { background: #007bff; }
        .item2 { background: #28a745; }
        .item3 { background: #dc3545; }
        .item4 { background: #ffc107; color: #333; }
        .item5 { background: #17a2b8; }
        .item6 { background: #e17055; }

        /* Grow demos */
        .grow-demo-1 .item1,
        .grow-demo-1 .item3 {
            flex-grow: 1;
        }

        .grow-demo-1 .item2 {
            flex-grow: 2;
        }

        .grow-demo-2 .item1 {
            flex-grow: 0;
        }

        .grow-demo-2 .item2 {
            flex-grow: 1;
        }

        .grow-demo-2 .item3 {
            flex-grow: 1;
        }

        .grow-demo-3 .item1 {
            flex-grow: 3;
        }

        .grow-demo-3 .item2 {
            flex-grow: 1;
        }

        .grow-demo-3 .item3 {
            flex-grow: 1;
        }

        /* Shrink demos */
        .shrink-container {
            width: 500px;
        }

        .shrink-demo-1 .item4,
        .shrink-demo-1 .item5 {
            flex-shrink: 1;
            width: 200px;
        }

        .shrink-demo-1 .item6 {
            flex-shrink: 2;
            width: 200px;
        }

        .shrink-demo-2 .item4 {
            flex-shrink: 0;
            width: 200px;
        }

        .shrink-demo-2 .item5 {
            flex-shrink: 1;
            width: 200px;
        }

        .shrink-demo-2 .item6 {
            flex-shrink: 1;
            width: 200px;
        }

        /* Side-by-side comparison */
        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .comparison-item {
            text-align: center;
        }

        .comparison-item h4 {
            margin-bottom: 5px;
            color: #007bff;
        }

        .comparison-item .container {
            margin: 5px 0;
        }

        /* Visual explanation */
        .visual-explanation {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin: 20px 0;
        }

        .visual-box {
            text-align: center;
        }

        .visual-box .bar {
            height: 30px;
            background: #007bff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            font-weight: bold;
            margin: 5px 0;
        }

        .visual-box .bar.grow-1 {
            background: #007bff;
            width: 60px;
        }

        .visual-box .bar.grow-2 {
            background: #28a745;
            width: 120px;
        }

        .visual-box .bar.grow-3 {
            background: #dc3545;
            width: 180px;
        }
    </style>
</head>
<body>

    <h1>flex-grow and flex-shrink Properties</h1>

    <!-- ====== 1. FLEX-GROW ====== -->
    <section>
        <h2>1. flex-grow</h2>
        <p>Specifies how much an item can <strong>grow</strong> relative to its siblings when there's available space.</p>

        <h3>flex-grow: 1 | 2 | 1</h3>
        <div class="container grow-demo-1">
            <div class="item item1">1 (grow: 1)</div>
            <div class="item item2">2 (grow: 2)</div>
            <div class="item item3">3 (grow: 1)</div>
        </div>
        <p class="note">Total grow factors = 4. Item 1 and 3 get 25% each, Item 2 gets 50%.</p>

        <h3>flex-grow: 0 | 1 | 1</h3>
        <div class="container grow-demo-2">
            <div class="item item1">1 (grow: 0)</div>
            <div class="item item2">2 (grow: 1)</div>
            <div class="item item3">3 (grow: 1)</div>
        </div>
        <p class="note">Item 1 doesn't grow. Items 2 and 3 share the available space equally.</p>

        <h3>flex-grow: 3 | 1 | 1</h3>
        <div class="container grow-demo-3">
            <div class="item item1">1 (grow: 3)</div>
            <div class="item item2">2 (grow: 1)</div>
            <div class="item item3">3 (grow: 1)</div>
        </div>
        <p class="note">Total grow factors = 5. Item 1 gets 60%, Items 2 and 3 get 20% each.</p>

        <div class="code-block">
            /* Item 1 and 3 grow equally, Item 2 grows twice as much */
            .item1, .item3 { flex-grow: 1; }
            .item2 { flex-grow: 2; }

            /* Item 1 doesn't grow, Items 2 and 3 grow equally */
            .item1 { flex-grow: 0; }
            .item2, .item3 { flex-grow: 1; }

            /* Item 1 grows 3x, Items 2 and 3 grow 1x each */
            .item1 { flex-grow: 3; }
            .item2, .item3 { flex-grow: 1; }
        </div>
    </section>

    <!-- ====== 2. FLEX-SHRINK ====== -->
    <section>
        <h2>2. flex-shrink</h2>
        <p>Specifies how much an item can <strong>shrink</strong> relative to its siblings when there isn't enough space.</p>

        <h3>flex-shrink: 1 | 1 | 2</h3>
        <div class="container shrink-container shrink-demo-1">
            <div class="item item4">4 (shrink: 1)</div>
            <div class="item item5">5 (shrink: 1)</div>
            <div class="item item6">6 (shrink: 2)</div>
        </div>
        <p class="note">Container is 500px wide. Items are 200px each (600px total). Item 6 shrinks twice as much.</p>

        <h3>flex-shrink: 0 | 1 | 1</h3>
        <div class="container shrink-container shrink-demo-2">
            <div class="item item4">4 (shrink: 0)</div>
            <div class="item item5">5 (shrink: 1)</div>
            <div class="item item6">6 (shrink: 1)</div>
        </div>
        <p class="note">Item 4 doesn't shrink. Items 5 and 6 share the overflow reduction equally.</p>

        <div class="code-block">
            /* Items 4 and 5 shrink equally, Item 6 shrinks twice as much */
            .item4, .item5 { flex-shrink: 1; width: 200px; }
            .item6 { flex-shrink: 2; width: 200px; }

            /* Item 4 doesn't shrink, Items 5 and 6 shrink equally */
            .item4 { flex-shrink: 0; width: 200px; }
            .item5, .item6 { flex-shrink: 1; width: 200px; }
        </div>
    </section>

    <!-- ====== 3. SIDE-BY-SIDE COMPARISON ====== -->
    <section>
        <h2>3. Side-by-Side Comparison</h2>

        <h3>flex-grow</h3>
        <div class="comparison-grid">
            <div class="comparison-item">
                <h4>grow: 1 | 1 | 1</h4>
                <div class="container" style="gap: 5px;">
                    <div class="item item1" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item2" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item3" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                </div>
                <p class="note">Equal growth</p>
            </div>

            <div class="comparison-item">
                <h4>grow: 1 | 2 | 1</h4>
                <div class="container" style="gap: 5px;">
                    <div class="item item1" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item2" style="flex-grow: 2; height: 60px; font-size: 0.8rem;">2</div>
                    <div class="item item3" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                </div>
                <p class="note">Middle grows more</p>
            </div>

            <div class="comparison-item">
                <h4>grow: 0 | 1 | 1</h4>
                <div class="container" style="gap: 5px;">
                    <div class="item item1" style="flex-grow: 0; height: 60px; font-size: 0.8rem;">0</div>
                    <div class="item item2" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item3" style="flex-grow: 1; height: 60px; font-size: 0.8rem;">1</div>
                </div>
                <p class="note">First doesn't grow</p>
            </div>
        </div>

        <h3 style="margin-top: 30px;">flex-shrink</h3>
        <div class="comparison-grid">
            <div class="comparison-item">
                <h4>shrink: 1 | 1 | 1</h4>
                <div class="container" style="width: 100%; gap: 5px;">
                    <div class="item item4" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item5" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item6" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                </div>
                <p class="note">Equal shrink</p>
            </div>

            <div class="comparison-item">
                <h4>shrink: 1 | 1 | 2</h4>
                <div class="container" style="width: 100%; gap: 5px;">
                    <div class="item item4" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item5" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item6" style="flex-shrink: 2; width: 200px; height: 60px; font-size: 0.8rem;">2</div>
                </div>
                <p class="note">Last shrinks more</p>
            </div>

            <div class="comparison-item">
                <h4>shrink: 0 | 1 | 1</h4>
                <div class="container" style="width: 100%; gap: 5px;">
                    <div class="item item4" style="flex-shrink: 0; width: 200px; height: 60px; font-size: 0.8rem;">0</div>
                    <div class="item item5" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                    <div class="item item6" style="flex-shrink: 1; width: 200px; height: 60px; font-size: 0.8rem;">1</div>
                </div>
                <p class="note">First doesn't shrink</p>
            </div>
        </div>
    </section>

    <!-- ====== 4. VISUAL EXPLANATION ====== -->
    <section>
        <h2>4. Visual Explanation</h2>

        <h3>How flex-grow works</h3>
        <div class="visual-explanation">
            <div class="visual-box">
                <div class="bar grow-1">grow: 1</div>
                <p class="note">1 share</p>
            </div>
            <div class="visual-box">
                <div class="bar grow-2">grow: 2</div>
                <p class="note">2 shares</p>
            </div>
            <div class="visual-box">
                <div class="bar grow-3">grow: 3</div>
                <p class="note">3 shares</p>
            </div>
        </div>
        <p class="note" style="text-align: center;">
            Total = 6 shares. The available space is divided proportionally: 1/6, 2/6, 3/6.
        </p>

        <div class="code-block">
            /* Available space is divided based on grow factors */
            .item1 { flex-grow: 1; }  /* Gets 1/6 of space */
            .item2 { flex-grow: 2; }  /* Gets 2/6 of space */
            .item3 { flex-grow: 3; }  /* Gets 3/6 of space */
        </div>
    </section>

    <!-- ====== 5. REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>flex-grow vs flex-shrink</h3>
        <table class="reference-table">
            <tr>
                <th>Aspect</th>
                <th>flex-grow</th>
                <th>flex-shrink</th>
            </tr>
            <tr>
                <td><strong>When it applies</strong></td>
                <td>When there's extra space</td>
                <td>When there's not enough space</td>
            </tr>
            <tr>
                <td><strong>Effect</strong></td>
                <td>Items get bigger</td>
                <td>Items get smaller</td>
            </tr>
            <tr>
                <td><strong>Default value</strong></td>
                <td><code>0</code></td>
                <td><code>1</code></td>
            </tr>
            <tr>
                <td><strong>Value 0</strong></td>
                <td>Won't grow</td>
                <td>Won't shrink</td>
            </tr>
            <tr>
                <td><strong>Higher value</strong></td>
                <td>Grows more</td>
                <td>Shrinks more</td>
            </tr>
        </table>

        <h3>Common Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>flex-grow</th>
                <th>flex-shrink</th>
            </tr>
            <tr>
                <td><code>0</code></td>
                <td>No growth</td>
                <td>No shrinking</td>
            </tr>
            <tr>
                <td><code>1</code></td>
                <td>Normal growth</td>
                <td>Normal shrinking (default)</td>
            </tr>
            <tr>
                <td><code>2</code></td>
                <td>Grows 2x more</td>
                <td>Shrinks 2x more</td>
            </tr>
            <tr>
                <td><code>3+</code></td>
                <td>Grows 3x+ more</td>
                <td>Shrinks 3x+ more</td>
            </tr>
        </table>

        <h3>flex Shorthand</h3>
        <table class="reference-table">
            <tr>
                <th>Shorthand</th>
                <th>Equivalent</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>flex: 1;</code></td>
                <td><code>flex-grow: 1; flex-shrink: 1; flex-basis: 0;</code></td>
                <td>Grow equally, shrink equally</td>
            </tr>
            <tr>
                <td><code>flex: auto;</code></td>
                <td><code>flex-grow: 1; flex-shrink: 1; flex-basis: auto;</code></td>
                <td>Grow and shrink based on content</td>
            </tr>
            <tr>
                <td><code>flex: none;</code></td>
                <td><code>flex-grow: 0; flex-shrink: 0; flex-basis: auto;</code></td>
                <td>Fixed size, no grow/shrink</td>
            </tr>
            <tr>
                <td><code>flex: 2 1 200px;</code></td>
                <td><code>flex-grow: 2; flex-shrink: 1; flex-basis: 200px;</code></td>
                <td>Grows 2x, shrinks 1x, base 200px</td>
            </tr>
        </table>
    </section>

    <!-- ====== 6. BEST PRACTICES ====== -->
    <section>
        <h2>6. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>flex-grow: 1</code> to make items fill available space equally</li>
                <li>Use <code>flex-shrink: 0</code> to prevent items from shrinking (e.g., icons, buttons)</li>
                <li>Use different grow factors to create proportional layouts</li>
                <li>Use the <code>flex</code> shorthand for concise code</li>
                <li>Test with different container sizes to ensure proper behavior</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use <code>flex-grow</code> when items should have fixed widths</li>
                <li>Don't forget that <code>flex-shrink: 0</code> can cause overflow on small screens</li>
                <li>Don't confuse <code>flex-grow</code> (extra space) with <code>flex-shrink</code> (overflow)</li>
                <li>Don't use large grow factors without understanding the proportional distribution</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

PropertyDescriptionDefaultValues
flex-growHow much an item grows0Number
flex-shrinkHow much an item shrinks1Number

flex-grow vs flex-shrink

Aspectflex-growflex-shrink
When it appliesExtra spaceNot enough space
EffectItems get biggerItems get smaller
Default0 (no growth)1 (can shrink)
Value 0Won’t growWon’t shrink
Higher valueGrows moreShrinks more

flex Shorthand

ShorthandEquivalentDescription
flex: 1;flex-grow: 1; flex-shrink: 1; flex-basis: 0;Grow equally
flex: auto;flex-grow: 1; flex-shrink: 1; flex-basis: auto;Based on content
flex: none;flex-grow: 0; flex-shrink: 0; flex-basis: auto;Fixed size
flex: 2 1 200px;flex-grow: 2; flex-shrink: 1; flex-basis: 200px;Custom

Best Practices

✅ Do This:

/* Equal-width items */
.item {
    flex: 1; /* grow: 1, shrink: 1, basis: 0 */
}

/* Proportional widths */
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; } /* Twice as wide */
.item3 { flex-grow: 1; }

/* Prevent shrinking */
.icon {
    flex-shrink: 0; /* Won't shrink */
}

/* Fixed-size item */
.sidebar {
    flex: none; /* Won't grow or shrink */
    width: 250px;
}

❌ Don’t Do This:

/* Don't use flex-grow without understanding distribution */
.item { flex-grow: 1; } /* Each gets equal share of extra space */

/* Don't prevent shrinking without considering small screens */
.item { flex-shrink: 0; } /* May overflow on mobile */

/* Don't confuse grow and shrink */
.item {
    flex-grow: 0;   /* Won't grow — applies when extra space */
    flex-shrink: 0; /* Won't shrink — applies when overflow */
}

Pro Tip: Think of flex-grow as “how much of the extra space do I get?” and flex-shrink as “how much of the overflow do I absorb?” Use flex: 1 for equal-width items, flex: none for fixed items, and different flex-grow values for proportional layouts. The flex shorthand is almost always cleaner than writing the three longhand properties separately!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!