min-content
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.
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: 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
Browser compatibility
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