min-content

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The min-content sizing keyword represents the minimum intrinsic size of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

The interpolate-size property and calc-size() function can be used to enable animations to and from min-content.

Syntax

css
/* 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: 200px 1fr min-content;

Examples

Using min-content for box sizing

HTML

html
<div class="item">Item</div> <div class="item">Item with more text in it.</div>

CSS

css
.item { width: min-content; background-color: #8ca0ff; padding: 5px; margin-bottom: 1em; }

Result

Sizing grid columns with min-content

HTML

html
<div id="container"> <div>Item</div> <div>Item with more text in it.</div> <div>Flexible item</div> </div>

CSS

css
#container { display: grid; grid-template-columns: min-content min-content 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; }

Result

Specifications

Specification
CSS Box Sizing Module Level 3
# valdef-width-min-content

Browser compatibility

See also