Codectionary / Developer documentation / CSS

Why Flex Items Sometimes Refuse to Shrink

A flex item’s automatic minimum size can prevent it from shrinking enough to fit beside a sibling.

What it is and why to use it

A flex item’s automatic minimum size can prevent it from shrinking enough to fit beside a sibling. Setting its minimum inline size to zero permits shrinking, while wrapping or clipping determines how the content fits inside. This is useful for a label beside a fixed action button.

Common mistakes and limitations

Setting a zero minimum is not itself a truncation or wrapping rule. Clipped labels can hide important information; provide an accessible way to discover the full text. The relevant axis can change with writing mode and flex direction.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="row"><span class="label">A very long document title that should not push the button away</span><button>Open</button></div>

Syntax

min-inline-size: 0;

Examples

Why Flex Items Sometimes Refuse to Shrink

Run the CSS against the supplied HTML, then experiment with the values.

.row { display: flex; gap: .75rem; max-width: 18rem; }
.label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row button { flex: none; }
  1. The label is allowed to shrink because its minimum inline size is zero.
  2. nowrap, hidden overflow and text-overflow combine to display an ellipsis in this single-line case.
  3. The button keeps its size through flex:none. This pattern is useful in file lists and compact toolbars.
HTML used by this example
<div class="demo"><div class="row"><span class="label">A very long document title that should not push the button away</span><button>Open</button></div></div>

Best practices

  • Setting a zero minimum is not itself a truncation or wrapping rule. Clipped labels can hide important information; provide an accessible way to discover the full text. The relevant axis can change with writing mode and flex direction.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading