CSS flex-shrinkProperty

Example

A, B, C are set to flex-shrink: 1; D, E are set to flex-shrink: 2:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example (example.com)</title> <style>

#content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; }

</style> </head> <body> <p>The total width of the div is 500px, flex-basis is 120px.</p> <p>A, B, C set flex-shrink:1. D, E set to flex-shrink:2</p> <p>D, E widths differ from A, B, C</p> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> </div> </body> </html>

Try it Yourself »

Example Analysis:

The default value of flex-shrink is 1. If the property is not explicitly defined, it will automatically use the default value of 1 to calculate the ratio after all factors are summed to perform space shrinkage.

In this example, A, B, and C explicitly define flex-shrink as 1, while D and E define flex-shrink as 2. Therefore, the calculation divides the remaining space into 7 parts in total, where A, B, and C each occupy 1 part, and D and E each occupy 2 parts, i.e., 1:1:1:2:2

We can see that the parent container is defined as 500px, and the child items are defined as 120px. After adding the child items together, the total is 600px, exceeding the parent container by 100px. The excess 100px needs to be absorbed by A, B, C, D, E through the shrink factor, so the weighted synthesis yields:100*1+100*1+100*1+100*2+100*2=700px。

Thus, we can calculate the amount of overflow to be removed for A, B, C, D, E:

A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

Finally, the actual widths of A, B, C, D, and E are respectively:120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px, in addition, this width includes the border.

Browser Support

The numbers in the table indicate the version number of the first browser that supports the property.

The number following -webkit-, -ms-, or -moz- is the first version that supports the prefixed property.

Property
flex-shrink	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Definition and Usage

The flex-shrink property specifies the shrink rules for flex elements. Flex elements only shrink when the sum of their default widths is greater than the container, and the amount of shrinkage is based on the value of flex-shrink.

Note:If the element is not an element of a flexbox object, the flex-shrink property has no effect.

Default value:	1
Inherited:	no
Animatable:	Yes. SeeAnimatable。 Try it Yourself
version:	CSS3
JavaScript Syntax:	object.style.flexShrink="5" Try it Yourself

CSS Syntax

flex-shrink: number|initial|inherit;

Property value

Value	Description
number	A number that specifies the amount by which the item will shrink relative to other flexible items. The default value is 1.
initial	Set this property to its default value. Seeinitial。
inherit	Inherits this property from the parent element. Seeinherit。

CSS Reference:flex property

CSS Reference:flex-basis property

CSS Reference:flex-direction property

CSS Reference:flex-flow property

CSS Reference:flex-grow property

CSS Reference:flex-wrap property

CSS Reference

other extensions