The min-content
sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.
min-content
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: 200px 1fr min-content; /* Global values */ min-content: inherit; min-content: initial; min-content: revert; min-content: revert-layer; min-content: unset;
Examples
Using min-content for box sizing
HTML
<div class="item">Item</div> <div class="item">Item with more text in it.</div>
CSS
.item { width: min-content; background-color: #8ca0ff; padding: 5px; margin-bottom: 1em; }
Result
Sizing grid columns with min-content
HTML
<div id="container"> <div>Item</div> <div> Item with more text in it. </div> <div>Flexible item</div> </div>
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
min-content |
46
1-48
|
79
|
66
3
|
No
|
33
15-35
|
11
2
|
46
1-48
|
46
18-48
|
66
4
|
33
14-35
|
11
1
|
5.0
1.0-5.0
|
Supported for width (and other sizing properties)
BCD tables only load in the browser
© 2005–2021 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