flexshrink

Flex-shrink is a property of flex items in the CSS Flexible Box Layout (Flexbox) that determines how items shrink to fit a flex container when there is not enough space along the main axis. It is a unitless number used by the flex shrink factor to allocate reductions in size among items. The default value is 1 for all items, meaning they shrink proportionally to their base sizes. A value of 0 disables shrinking for that item, so it will not reduce its size even if the container becomes smaller, potentially causing overflow.

How it works: When the total flex-basis size of the items exceeds the size of the flex container, the negative free space is distributed according to the flex-shrink values. Items with higher shrink factors lose more space. If all items have a shrink factor of 1, they shrink equally in proportion to their base sizes. The actual amount each item shrinks is also influenced by minimum size constraints such as min-width or min-content, which can prevent shrinking beyond those limits.

Practical notes: Flex-shrink applies only to elements inside a flex container (display: flex or inline-flex) and along the main axis defined by flex-direction. It interacts with flex-basis; when the base size is fixed, the shrink calculation uses that size along with the shrink factor. It can be constrained by min-width or min-height settings, which can stop shrinking before the container is fully satisfied. To control shrinking explicitly, you can set the flex-shrink property directly or use the flex shorthand to configure grow, shrink, and basis together.

Examples (conceptual): Two items with equal base widths and flex-shrink: 1 will shrink equally in a tight container. If one item has flex-shrink: 2 while the other has 1, the first item shrinks faster as space becomes constrained.