CSS flex-shrink Controlling Flex Item Shrinkage

Introduction

The flex-shrink CSS property is crucial for creating flexible and responsive web designs. It controls how flex items shrink when there isn’t enough space in their container. By setting the flex-shrink value, you can make sure elements adjust proportionally to fit within the available space. This prevents overflow and ensures a balanced layout.

Widely supported across browsers, flex-shrink has been available since September 2015. This means you can use it confidently in your projects without worrying about compatibility issues.

Description

The flex-shrink property determines how much a flex item will shrink relative to other items in the same container when space is limited. It works with the flex-basis property, which sets the initial size of a flex item. When the combined size of all items exceeds the container’s size, the browser distributes the negative free space according to the flex-shrink values.

Items with higher flex-shrink values will shrink more than those with lower values. This ensures a balanced layout where larger items don’t shrink disproportionately compared to smaller items.

Syntax

The syntax for the flex-shrink property is simple:

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: revert-layer;
flex-shrink: unset;

• <number>: Specifies the shrink factor. Negative values are invalid, and the default is 1.
• inherit: Inherits the flex-shrink value from the parent element.
• initial: Sets the flex-shrink value to its default value, which is 1.
• revert: Reverts the value to the user agent’s default stylesheet.
• revert-layer: Reverts the value to the browser’s default stylesheet.
• unset: Resets the property to its natural value, which means it will be either inherited or set to the initial value.

Values

The flex-shrink property accepts a single <number> value, which determines the shrink factor of a flex item. Here are the possible values:

• <number>: A positive number that specifies the shrink factor. Negative values are invalid, and the default value is 1.
• inherit: Inherits the flex-shrink value from the parent element.
• initial: Sets the flex-shrink value to its default value, which is 1.
• revert: Reverts the value to the user agent’s default stylesheet.
• revert-layer: Reverts the value to the browser’s default stylesheet.
• unset: Resets the property to its natural value, which means it will be either inherited or set to the initial value.

Formal Definition

The flex-shrink property is formally defined as follows:

Formal Syntax

The formal syntax for the flex-shrink property is:

flex-shrink = <number [0,∞]>

This syntax specifies that the flex-shrink property accepts a positive number value, with 0 being the minimum and no upper limit.

Examples

Setting Flex Item Shrink Factor

This example shows how negative free space is distributed based on the item’s shrink factor. It includes five flex items with a flex-shrink value greater than 0, which have a combined width greater than their parent flex container’s width.

HTML

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box4" style="background-color:lightsalmon;">D</div>
  <div class="box5" style="background-color:lightgreen;">E</div>
</div>

CSS

#content {
  display: flex;
  width: 500px;
}

#content div {
  width: 200px;
}

.box {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

Result

The flex items don’t overflow their container because they can shrink. The 500px of negative free space is distributed among the five items based on their flex-shrink values. The first three items have flex-shrink: 1 set. D has flex-shrink: 1.5 and E has flex-shrink: 2 set. The final width of D and E is less than the others, with E smaller than D.

Basic Usage of flex-shrink

In this example, we demonstrate the flex-shrink property in a flex container with five div elements, each styled to illustrate different aspects of flex-shrink behavior, such as default, initial, and inherited values.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS flex-shrink Property</title>
    <style>
        #main {
            width: 450px;
            height: 200px;
            border: 1px solid black;
            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 compared to others */
        #main div:nth-of-type(2) {
            flex-shrink: 4;
        }
    </style>
</head>
<body>
    <h1>Website</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

This example shows how the flex-shrink property affects the size of flex items within a container. The second div has a higher flex-shrink value, causing it to shrink more compared to the other divs.

Specifications

The flex-shrink property is defined in the following specification:

• CSS Flexible Box Layout Module Level 1 - flex-shrink property

Browser Compatibility

The flex-shrink property is widely supported across many devices and browser versions. It has been available across browsers since September 2015. Below is the compatibility table:

See Also

• Basic concepts of flexbox
• Controlling ratios of flex items along the main axis
• CSS flexible box layout module

FAQs

What does the flex-shrink property do in CSS?

The flex-shrink property in CSS determines how much a flex item will shrink relative to the other items inside a flex container when there isn’t enough space. It defines the proportion by which the item should reduce in size.

How does flex-shrink: 0 affect an item?

Setting flex-shrink: 0 prevents the item from shrinking when space is limited. It keeps the item’s size fixed, even if it causes overflow or other items to shrink more.

Can I allow one item to shrink more than others?

Yes, you can set a higher flex-shrink value for the item you want to shrink more. For example, an item with flex-shrink: 2 will shrink twice as much as one with flex-shrink: 1.

What is the difference between flex-shrink and flex-grow?

flex-grow controls how items expand when there is extra space, while flex-shrink controls how items reduce in size when space is limited. Both work together to create flexible layouts.

What is the default value of flex-shrink?

The default value of flex-shrink is 1, meaning the item will shrink proportionally when space is limited unless a different value is specified.

Supported Browsers

The flex-shrink property is supported by the following browsers:

• Google Chrome 5.0
• Edge 12
• Mozilla Firefox 4.0
• Safari 5.0
• Opera 11.1

This broad support ensures that your designs using flex-shrink will work consistently across various platforms and devices.