CSS flex-shrink Property

Last Updated : 14 Oct, 2024

The flex-shrink property in CSS defines how a flex item will shrink relative to the other flexible items within the same container. This is important for responsive design, as it allows elements to adjust their size dynamically based on the available space.

Note: If the item in the container is not flexible then the flex-shrink property will not affect that item.

Syntax

flex-shrink: <number> | initial | inherit;

Default Value: 1

Property values

Property Value	Description
number	A number that defines how the item will shrink compared to other flexible items.
initial	It sets the value to its default value.
inherit	It inherits the property from its parent elements.

Examples of CSS flex-shrink Property

Here are some basic examples of how the CSS flex-shrink property works:

Example 1: Basic Usage of flex-shrink

In this example, we show how the flex-shrink property works in a flex container. The second div has a higher shrink value (flex-shrink: 4), so it shrinks more than the others when space is limited, helping control how much each item shrinks.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS flex-shrink Property
    </title>
    <style>
        #main {
            width: 450px;
            height: 200px;
            border: 1px solid black;
            display: -webkit-flex;
            display: flex;
            color: white;
        }

        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }

        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }

        #main div {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 100px;
        }

        /* shrinking the 2nd div compare to others */
        #main div:nth-of-type(2) {
            flex-shrink: 4;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>The flex-shrink:number</h3>

    <!-- Making 5 divs in main -->
    <div id="main">
        <div style="background-color:#009900;">
            <p>
                A number specifying how much the item
                will shrink relative to the rest of the
                flexible items.
            </p>
        </div>

        <div style="background-color:#00cc99;">
            <p> Default value is 1</p>
        </div>

        <div style="background-color:#0066ff;">
            <p>
                Initial Sets this property to
                its default value
            </p>
        </div>

        <div style="background-color:#66ffff;;"></div>

        <div style="background-color:#660066;">
            <p>
                Inherits this property from
                its parent element
            </p>
        </div>
    </div>
</body>

</html>

Output:

Basic Usage of flex-shrink output

Example 2: Advanced Usage of flex-shrink with flex-grow

In this example, we show how the flex-shrink and flex-grow properties work in a flex container to create a responsive layout. Items shrink when space is limited and expand when extra space is available.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS Advanced flex-shrink Property
    </title>
    <style>
        #main {
            width: 600px;
            height: 250px;
            border: 1px solid black;
            display: flex;
            color: white;
            justify-content: space-around;
        }

        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }

        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }

        #main div {
            flex-grow: 1;
            flex-shrink: 2;
            flex-basis: 120px;
            margin: 10px;
            padding: 20px;
        }

        /* Second div shrinks 4x more compared to others */
        #main div:nth-of-type(2) {
            flex-shrink: 4;
        }

        /* Third div expands more and shrinks less */
        #main div:nth-of-type(3) {
            flex-grow: 3;
            flex-shrink: 1;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>Advanced Example of CSS flex-shrink Property</h3>

    <!-- Flex container with 5 div elements -->
    <div id="main">
        <div style="background-color:#009900;">
            <p>
                flex-grow: 1, flex-shrink: 2
            </p>
        </div>

        <div style="background-color:#00cc99;">
            <p> flex-grow: 1, flex-shrink: 4 (Shrinks more)</p>
        </div>

        <div style="background-color:#0066ff;">
            <p> flex-grow: 3, flex-shrink: 1 (Expands more)</p>
        </div>

        <div style="background-color:#66ffff;">
            <p> flex-grow: 1, flex-shrink: 2 (Default)</p>
        </div>

        <div style="background-color:#660066;">
            <p> flex-grow: 1, flex-shrink: 2</p>
        </div>
    </div>
</body>

</html>

Output :

output

Supported Browser

The browser supported by CSS flex-shrink Property are listed below:

Google Chrome 5.0
Edge 12
Mozilla 4.0
Safari 5.0
Opera 11.1

CSS flex-basis Property

Sabya_Samadder

Improve

Article Tags :