The flex-shrink property sets the shrink factor for a flex item.
This is relevant when items do not fit inside a container.
flex-shrink sets the shrinkage relative to other items.
Item 3 has flex-shrink set to 4.
It shrinks up to 4 times or until the container is filled.
<style>
.flex-shrink {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex-shrink > div {
background-color: aliceblue;
margin: 5px;
width: 45%;
text-align: center;
line-height: 55px;
font-size: 20px;
}
</style>
<div class="flex-shrink">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 4">3</div>
</div>
flex-shrink: number | initial | inherit;
| Value | Description |
|---|---|
number |
A floating point number representing a shrink factor. Default value is 0 (no shrinking). |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when flex-shrink support started for each browser.
 Chrome
|
29.0 | Aug 2013 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
17.0 | Aug 2013 |
 Safari
|
9.0 | Sep 2015 |
