CSS flex-shrink property

Description

CSS flex-shrink determines how much the flex item should shrink to fill the remaining space relative to the other flex items.

Syntax

flex-shrink : +ve integer

Property values

+ve integerDefault 1: The flex items shrink to fill the free remaining space relative to the other items.; flex-shrink: 1;
Try it
+ve integer 0: The flex items do not shrink to fill the remaining space.; flex-shrink: 0;
Try it

Applicable to

It applies to flex items.

Preview

Code

CSS

.parent{
display:flex;
width:250px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}
.child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}

HTML

<div class="parent">
<p class="child">#First 1</p>
<p class="child">#Second 2</p>
<p class="child">#Third 3</p>
<p class="child">#Third 4</p>
<p class="child">#Third 5</p>
</div>