Min-Width Property
Last updated: 2026-09-13
min-width Min-Width Property
The min-width property sets the minimum width of an element, preventing it from being compressed too small when the container narrows. Its default value, 0, means there is no lower limit. It is often used together with width and max-width and is an important tool for protecting readability in responsive layouts.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | non-replaced |
| Animation Type | length |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
min-width: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Values
| Value | Type | Description |
|---|---|---|
0 | Keyword | No minimum width. |
<length> | Type | A fixed minimum width. |
<percentage> | Type | A percentage relative to the containing block. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： min-width takes precedence over width and max-width, forcing the element to never shrink below this value.
❓ FAQ
QIf both min-width and width are set, which one wins?
Amin-width has higher priority than width. When width is smaller than min-width, the element renders at min-width; when width is larger, it renders at width. min-width can even override max-width. The CSS size constraint order is min-width first, then max-width, then width, so min-width is the strongest of the three and protects content from being crushed on narrow screens. The same precedence applies to heights with min-height.
QWhy do flex items need min-width:0 to shrink?
ABecause a flex item's default min-width is auto, which behaves like the minimum width of its content, for example the longest word. When the container runs out of space, the item refuses to shrink below that, causing overflow or a broken layout. Setting min-width:0 allows the item to shrink freely, which is common for text truncation with text-overflow:ellipsis and for evenly split lists inside flex layouts.
QWhat is the difference between min-width and max-width?
Amin-width sets the lower bound of an element's width, preventing it from being squeezed narrower than the set value; max-width sets the upper bound, preventing it from being stretched wider than the set value. They can be used together, and the browser resolves the final width using the precedence min-width, then max-width, then width. Together they define the width range in responsive layouts.
QWhat is the min-width percentage relative to?
AThe percentage is computed against the containing block's width. For example, min-width:50% means the element can never be narrower than half of the parent's content area width. Note that for absolutely positioned elements the reference is the padding box of the nearest positioned ancestor, so check which containing block applies before relying on the computed ratio. In normal flow, that containing block is almost always the parent's content area.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
max-width Property
Cap the element's maximum width.
Flexbox Layout Tutorial
Understand the role of min-width in flex layouts.
