W3cubDocs

/CSS

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;

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 Status Comment
CSS Box Sizing Module Level 3
The definition of 'min-content' in that specification.
Working Draft Defines the keyword as laid out box size for width, height, min-width, min-height, max-width and max-height.
CSS Grid Layout
The definition of 'min-content' in that specification.
Candidate Recommendation Defines the keyword when used as a track size.

Browser compatibilityUpdate compatibility data on GitHub

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Supported for width (and other sizing properties)

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
min-content 46
46
1 — 48
Uses the non-standard name: min-intrinsic
79 66
66
3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No 33
33
15 — 35
Uses the non-standard name: min-intrinsic
11
11
2
Uses the non-standard name: min-intrinsic
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
min-content 46
46
1 — 48
Uses the non-standard name: min-intrinsic
46
46
18 — 48
Uses the non-standard name: min-intrinsic
66
66
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
33
33
14 — 35
Uses the non-standard name: min-intrinsic
11
11
1
Uses the non-standard name: min-intrinsic
5.0
5.0
1.0 — 5.0
Uses the non-standard name: min-intrinsic

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/min-content