CSS - min-content Property

The CSS min-content is a value that can be used for sizing properties to specify the minimum size of a box or element based on its content.

It specifically suggests that text content will make use of soft-wrapping opportunities, which enable the material to resize to the length of its longest word. The min-content value is calculated based on the intrinsic minimum size required by the content inside the box.

Syntax

/* Used as a length */
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;
/* Used in grid tracks */
grid-template-columns: 100px 2fr min-content;

CSS min-content - Box Sizing

The following example demonstrates the use of min-content keyword for box sizing.

CSS min-content - Sizing Grid Columns

The following example demonstrates the use of min-content keyword for sizing grid columns.