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 an element. The keyword shrinks the element to the smallest possible size without causing avoidable overflow of its content. For text content, this keyword causes the content to wrap at every opportunity (such as spaces between words), and the element will be only as wide as the longest word.
The interpolate-size property and calc-size() function can be used to enable animations to and from min-content.
/* Used as a length value */ 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;
<div class="item">Item</div> <div class="item">Item with more text in it.</div>
.item {
width: min-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
<div id="container"> <div>Item</div> <div>Item with more text in it.</div> <div>Flexible item</div> </div>
#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;
}
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
min-content |
461–48 | 79 | 663 | 3315–35 | 112 | 4618–48 | 664 | 3314–35 | 111 | 5.01.0–5.0 | 464.4–48 | 111 |
max-content, fit-content
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content