Definition: Flex-shrink specifies a shrink rule for Flex elements that occurs when the width/height of a Flex element is greater than the width/height of the parent container

When flex-shrink is 0

At this point, the width of main is 400px, while the width of its five items is 100px, obviously exceeding the width of Main. Therefore, in order to accommodate the width of main, the width of the item is 80px in the actual display

When flex-shrink is set to 0 for an item element, the item(Flex element) will not shrink, but will display at its original size, which will exceed the width of the parent element

Give flex-shrink another value greater than 0

When the five Flex elements exceed the width/height of the parent container, flex-shrink is set to the specified width/height. After each Flex element is shrunk, the displayed width/height is calculated as follows:

If all Flex elements are not shrunk (flex-shrink:0), the width of the parent element is exceeded (diff) : the height/width of the parent element – the height/width of the Flex element example: The parent element in the current example is 400px wide, and the total width of the five Flex child elements is 500px, 100px wider than the parent element

Shrink width/height of flex elements: the set height/width of flex elements – diff * (the current flex-shrink value/the total flex-shrink value of flex elements) for example: Calculate the shrunk width of Item2 = 100px – 100px * 2/6

Note: It must be a flex element whose parent is defined as display: flex