min-content
`min-content` is the smallest size content can use after wrapping at every allowed break.
Another example
A translation review table sets its tag column to `min-content`. “Needs review” wraps onto two lines instead of taking space from the translation. A build hash that cannot break still sets the minimum width until `overflow-wrap:anywhere` is turned on.
Main parts
- 01Soft wrap opportunities
- 02Unbreakable contribution
- 03Minimum intrinsic result
Use it when
Use it when a track or box should shrink as far as its content can safely wrap.
Do not use it when
It does not mean zero or the shortest word. Text that cannot break, images, and other replaced elements still add width.
Name used in code
width: min-content or minmax(min-content, …) Before you ship
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Use or define min-content to make the visual experience clear and easy to use. User context: A translation review table sets its tag column to `min-content`. “Needs review” wraps onto two lines instead of taking space from the translation. A build hash that cannot break still sets the minimum width until `overflow-wrap:anywhere` is turned on. Design concept to apply: min-content. Why it fits: Use it when a track or box should shrink as far as its content can safely wrap. Do not use it when: It does not mean zero or the shortest word. Text that cannot break, images, and other replaced elements still add width. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): A formal document may still be a draft, release candidate, or final version. Check its status and browser or platform support. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Check this request
Review the current use of min-content. Definition: `min-content` is the smallest size content can use after wrapping at every allowed break. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.