CSS: min-content, max-content

What is min-content

min-content is a CSS keyword value that represents element's intrinsic minimum size.

For text, this typically means its longest unbreakable word.

This value is supported by several CSS properties, including:

• Dimension properties: width, height, inline-size, and block-size.
• Constraint properties: min-width, max-width, min-height, max-height
• Layout properties: It is frequently used in CSS Grid ( grid-template-columns ) and Flexbox ( flex-basis ) to control track or item sizing based on content requirements.

• CSS: min-width max-width, min-height max-height
• CSS: grid-template-columns
• CSS: flex: flex-grow, flex-shrink, flex-basis

In practice, width: min-content ensures an element remains as narrow as possible while still containing its content, making it ideal for tight layouts like navigation menus or sidebar widgets where overflow must be prevented.

What is max-content

max-content represents element's intrinsic maximum size.

browser support

supported by all major browsers since 2021.