css / latest / fit-content.html /

fit-content

The fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content.

When used as laid out box size for width, height, min-width, min-height, max-width and max-height the maximum and minimum sizes refer to the content size.

Note: The CSS Sizing specification also defines the fit-content() function. This page details the keyword.

Syntax

width: fit-content
block-size: fit-content

Examples

Using fit-content for box sizing

HTML

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">Item with more text in it, hopefully we have added enough text so the text will start to wrap.</div>
</div>

CSS

.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

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

Result

Specifications

Specification
CSS Box Sizing Module Level 4
# valdef-width-fit-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
fit-content
46
22
1-48
79
79
3
No
33
15
15-35
11
7
2
46
≤37
1-48
46
25
18-48
4
33
14
14-35
11
7
1
5.0
1.5
1.0-5.0

Supported for width (and other sizing properties)

BCD tables only load in the browser

See also

© 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/fit-content

Name CSS
Version
Badge
Last Updated 2022-04-27T17:24:15Z