CSS flex-shrink Property

The flex-shrink property specifies how much the item shrinks in comparison to other items in the container. It defines an element's ability to shrink in comparison to other elements placed inside the same container.

Note: that if the item in the container is not flexible, the flex-shrink property will have no effect on it.

Syntax

flex-shrink: number | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 250px;
        height: 100px;
        border: 1px solid #212b36;
        display: flex;
    }
    .box div {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100px;
    }

    .box div:nth-of-type(2) {
        flex-shrink: 3;
    }
</style>
</head>
<body>

<div class="box">
    <div style="background-color:#00ab55;"></div>
    <div style="background-color:#ff4842;"></div>
    <div style="background-color:#ffc107;"></div>
    <div style="background-color:#1890ff;"></div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
number	A number indicating how much the item will shrink in comparison to the other flexible items. The default value is 1.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
flex-shrink	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	11.0	17.0

flex-grow

flex-wrap

CSS flex-shrink Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us