mincontent

Min-content is a CSS intrinsic sizing keyword used to describe the minimum contribution of a box’s content to its size along an axis. It is one of the intrinsic size concepts alongside max-content and fit-content. In CSS, min-content can be used with width, min-width, height, and min-height to indicate the smallest dimension the content could occupy without overflowing, given the content and normal line-breaking opportunities.

For width, the min-content size corresponds to the narrowest possible layout the content can achieve when line breaks are allowed at appropriate points. In practice, this often means the width is at least as wide as the longest unbreakable sequence (such as a very long word). For height, the concept is analogous, representing the smallest height the content can fit into while respecting line breaks and stacking.

Min-content is typically contrasted with max-content, which represents the largest possible size the content would take if laid out in a single line (or without wrapping). The available space, container constraints, and other sizing properties determine the actual used size. In responsive layouts, min-content helps prevent content from growing beyond its logical minimum while still allowing flexibility within the layout rules.

Usage examples include setting an element’s width to min-content, or constraining its minimum width with min-width: min-content, and similarly for height. While it provides a useful lower bound for sizing, the resulting layout must still respect the surrounding grid, flex, or block formatting context.