The flex-shrink property defines how much a flex item will shrink in comparison to other flex items of that container when the space of the container is not enough for the items. The parent container of the items should be display:flex
else it will have no effect.
flex-shrink: number;
The default value is 1.
.flex-container{
border: 1px solid black;
width: 500px;
height: 50px;
display: flex;
}
.div-1{
background-color: aqua;
width: 300px;
flex-shrink: 0;
}
.div-2{
background-color: rgb(76, 228, 164);
width: 300px;
flex-shrink: 1;
}
.div-3{
background-color: rgb(244, 247, 114);
width: 300px;
flex-shrink: 2;
}
Here. width of each items are 300px and the width of container is just 500px. so the space of the container is not enough for the items. So, flex-shrink makes the items shrink according to the values provided to adjust the space in the container.
number: sets the given number as the value of how much that flex item will shrink in comparison to other items.