CSS flex-shrink Property

The flex-shrink property controls how much a flex item shrinks relative to the other items in the same container when there isn't enough room for all of them at their preferred sizes. It only does anything when the items' combined size is larger than the container — that overflow is the "negative space" that gets distributed back by shrinking items.

The value is a unitless number (a flex factor), not a length. A higher number means an item gives up more of its width (or height, in a column) than its neighbors. The default is 1, so by default every flex item shrinks at the same rate. Set it to 0 to lock an item at its flex-basis and refuse to shrink.

flex-shrink is the third value in the flex shorthand (flex: grow shrink basis) and is one of the CSS3 properties.

Info

When negative space is distributed, each item's flex-shrink factor is multiplied by its flex-basis (or, when flex-basis is auto, by the item's content size). This weighting means larger items shrink more than small ones even when their shrink factors are equal — it prevents a small item from collapsing to nothing while a large one keeps its size.

How shrinking is calculated

Suppose a flex container is 400px wide and holds two items whose flex-basis values add up to 600px — there is 200px of overflow to absorb. If both items have the same flex-basis of 300px and shrink factors of 1 and 3, the weighted shares are 300×1 = 300 and 300×3 = 900, a total of 1200. Each item gives up the overflow in proportion to its share:

Item A removes 200 × (300 / 1200) = 50px → ends up 250px.
Item B removes 200 × (900 / 1200) = 150px → ends up 150px.

So the item with flex-shrink: 3 loses three times as much width as the one with flex-shrink: 1. The two final widths add back up to the container's 400px.

When to use flex-shrink

Protect a fixed element. Give a sidebar, logo, or icon flex-shrink: 0 so it keeps its size while flexible content around it shrinks.
Prioritize what shrinks first. Raise the factor on less important items so they collapse before primary content does.
Build flexible toolbars and navbars. Let buttons shrink together as the viewport narrows instead of overflowing or wrapping. | Initial Value | 1 | |---|---| | Applies to | Flex items, including in-flow pseudo-elements. | | Inherited | No. | | Animatable | Yes. Items are animatable. | | Version | CSS3 | | DOM Syntax | object.style.flexShrink = "4"; |

Syntax

Syntax of CSS flex-shrink Property

flex-shrink: number | initial | inherit;

A unitless number sets the flex factor; initial resets it to 1 and inherit takes the parent's value.

Example of the flex-shrink property

In the example below, all items start from a flex-basis of 100px (so 500px of content competes for a 320px box). The second item has flex-shrink: 7 while the others have 3, so it shrinks more than twice as fast and ends up the narrowest.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Try it Yourself »

Result

![CSS flex-shrink Property](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)

Preventing an item from shrinking

Set flex-shrink: 0 to keep an item at its basis while its siblings absorb all the overflow. Here the sidebar stays 200px wide and only the content area shrinks:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: flex;
        width: 320px;
        border: 1px dotted #666666;
      }
      .sidebar {
        flex-basis: 200px;
        flex-shrink: 0;        /* never shrinks */
        background-color: #1c87c9;
      }
      .content {
        flex-basis: 200px;
        flex-shrink: 1;        /* shrinks to make room */
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

The two bases total 400px in a 320px box, so 80px must be removed. Because the sidebar refuses to shrink, the content area absorbs all 80px and renders at 120px.

Values

Value	Description	Play it
number	Specifies how much the item will shrink relative to the rest of the flexible items of the same container. Default value is 1.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits this property from its parent element.

flex-shrink rarely works alone — it's the counterpart of the other flexbox sizing properties:

flex-grow — how much an item grows to fill extra space (the opposite direction).
flex-basis — the item's starting size before growing or shrinking is applied.
flex — the shorthand that sets flex-grow, flex-shrink, and flex-basis at once.
flex-wrap — when items can wrap to a new line instead of shrinking.
flex-direction — whether shrinking happens along the row (width) or column (height).

Practice

What is the function of the 'flex-shrink' property in CSS?

It defines the ability for a flex item to grow if necessary.It specifies the alignment between the lines inside a flexible container when the items do not use all available space.It defines the ability for a flex item to shrink if necessary.It allows you to control how a flex container is laid out along the cross axis.It determines the order in which the flex items are displayed and laid out within the flex container.