CSS Flex-shrink property

This property defines how the flex item will shrink relative to the other items inside the flex container.

Syntax

flex-shrink: number | initial | inherit

Property Values:

number: A positive number determines the flex-shrink factor of the flex item. The default value is 1. Negative numbers are invalid.

initial: Its default value.

inherit: Its parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
border: 5px solid #cc00cc;
display: flex;
background-color: #cc3300;
margin: 30px;
}
.flex-item{
background-color: pink;
font-size: 25px;
margin: 5px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}

</style>
</head>
<body>

<h1> Example of the flex-shrink property </h1>
<div class="container">
<div class = "flex-item"></div>
<div class = "flex-item"></div>
<div class = "flex-item" style = "flex-shrink: 5;"> 5 </div>
<div class = "flex-item" style = "flex-shrink: initial;"> initial </div>
<div class = "flex-item" style = "flex-shrink: inherit;"> inherit </div>
</div>
<div class="container">
<div class = "flex-item"></div>
<div class = "flex-item" style = "flex-shrink: 8;"> 8 </div>
<div class = "flex-item" style = "flex-shrink: 10;"> 10 </div>
<div class = "flex-item" style = "flex-shrink: 6;"> 6 </div>
<div class = "flex-item"></div>
</div>

</body>
</html>

OUTPUT: