midCSS
Explain the CSS min-content, max-content, and fit-content keywords.
Updated Apr 28, 2026
Short answer
These intrinsic sizing keywords allow elements to size themselves based on their content rather than explicit lengths.
Deep explanation
min-content shrinks the container as much as possible without overflowing content (e.g., breaking text into the longest single word). max-content expands to fit the content without any wrapping. fit-content acts like max-content up to a specified limit, then wraps.
Real-world example
Creating a centered button that wraps perfectly around its dynamic text without needing explicit pixel widths or inline-block.
Common mistakes
- Using `max-content` on a paragraph inside a narrow mobile layout, causing the text to overflow horizontally off the screen.
Follow-up questions
- Can fit-content be used in Grid layouts?