
The CSS flex-shrink property defines how the item will shrink relative to the rest of the flexible items inside the same container.
Syntax:
flex-shrink: number;
number – A number defining how much the item will shrink relative to the rest of the flexible items. The default value is 1.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#box-container {
width: 300px;
height: 100px;
border: 3px solid #333;
display: flex;
}
#box-container div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 70px;
}
#box-container div:nth-of-type(3) {
flex-shrink: 3;
}
</style>
</head>
<body>
<div id="box-container">
<div style="background-color:#264653;"></div>
<div style="background-color:#2a9d8f;"></div>
<div style="background-color:#e9c46a;"></div>
<div style="background-color:#f4a261;"></div>
<div style="background-color:#e76f51;"></div>
</div>
</body>
</html>
Output:
Note: Internet Explorer 10 and earlier versions do not support the flex-shrink property!
Enjoy coding!
Read also: