The min-content, max-content and fit-content are CSS properties applicable for widths. These are used to control the size of elements based on their content, but they behave differently:
1. min-content
- Definition: The smallest size the element can shrink to without overflowing its content.
- Behavior: Breaks lines at the smallest possible points (e.g., word boundaries).
- Use case: When you want the element to be as narrow as possible while still fitting the content.
2. max-content
- Definition: The largest size the element can grow to without wrapping the content.
- Behavior: The element expands to fit the longest unbreakable content.
- Use case: When you want to avoid line breaks and show content in one line.
3. fit-content
- Definition: A flexible size between
min-contentandmax-content - Behavior: Grows with content but also wraps if less width
- Use case: When you want responsive sizing
Comparison
| Feature | min-content | max-content | fit-content |
|---|---|---|---|
| Grows with content | ❌ No | ✅ Yes | ✅ Yes |
| Shrinks to fit | ✅ Yes | ❌ No | ✅ Yes (up to a limit) |
| Wraps content | ✅ Yes | ❌ No | ✅ Yes |
| Can limit size | ❌ No | ❌ No | ❌ No |
| Use case | Tight layout, minimal width | Full content display, no wrap | Flexible layout |
Syntax Examples:
.container {
width: min-content; /* Shrinks to smallest possible width */
}
.container {
width: max-content; /* Expands to fit content without wrapping */
}
.container {
width: fit-content; /* Grows with content */
}