flex: 1 1 0% vs flex: 1 1 auto in CSS

The primary difference between flex: 1 1 0% and flex: 1 1 auto lies in the flex-basis value, which dictates how the browser calculates and distributes space among flex items. While both declarations allow items to grow and shrink equally, flex: 1 1 0% distributes all available space evenly to create strictly equal-width columns regardless of content size, whereas flex: 1 1 auto factors in the initial content size of each item before distributing the remaining free space.

Understanding the Shorthand Syntax

The flex property is a shorthand for three sub-properties in the following order:

1. flex-grow: Determines how much a flex item will grow relative to the rest of the flex items when positive free space is available.
2. flex-shrink: Determines how much a flex item will shrink relative to the rest of the flex items when negative space is available (overflow).
3. flex-basis: Sets the default size of the element before the remaining space is distributed.

In both flex: 1 1 0% and flex: 1 1 auto, flex-grow is set to 1 and flex-shrink is set to 1. The divergence occurs entirely at the third value: 0% versus auto.

How flex: 1 1 0% Works

When using flex-basis: 0%, the browser considers the starting size of every item to be zero.

• Space Distribution: The entire width of the flex container is treated as unoccupied, "free" space.
• Result: Because flex-grow: 1 applies to all items, the entire container width is divided equally among them.
• Behavior: The items will have identical widths regardless of how much text or content is inside them (provided the content does not overflow min-width constraints).

.item {
  flex: 1 1 0%;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

If you place three elements in a container using this rule, each item will consume exactly 33.33% of the container width.

How flex: 1 1 auto Works

When using flex-basis: auto, the browser looks at the item's intrinsic size (content width) or explicit width/height properties to determine its baseline size.

• Space Distribution: The browser first allocates enough space to each element to fit its content or defined dimensions. It then measures whatever remaining space is left in the container.
• Result: Only the remaining unused space is divided evenly via flex-grow: 1.
• Behavior: Items containing more content will naturally start larger and remain larger than items with less content.

.item {
  flex: 1 1 auto;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}

If you have two items where Item A contains one word and Item B contains a long paragraph, flex: 1 1 auto will result in Item B being substantially wider than Item A, because both receive an equal share of the extra space on top of their original content sizes.

Key Differences at a Glance

When to Use Which

• Use flex: 1 1 0% when building grid-like layouts, side-by-side card decks, or navigation tabs where every column must be strictly the same size regardless of content differences.
• Use flex: 1 1 auto when elements need to adapt to their text length or media size, but you still want them to expand to fill any unused gaps in the parent container.