94

I'm following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.

I have this example:

*{margin:0; padding:0}
.box{
  background: lightgreen;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
<div class="box">
  <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
  <figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>

The article says that fit-content can be used to center a div of unknown width with margin: x auto;

But if you change fit-content for max-content in this example, this is working anyway and they seem to behave always in the same way.

Does anyone know what is the difference between this two rules and in which cases should I use one or the other?

2
  • It's not very well supported yet though caniuse.com/#feat=intrinsic-width
    – Aaron
    Commented Jun 8, 2015 at 8:29
  • 2
    fit-content can often be of more use as a min- or max-width value, rather than a width. For example, style a <div> in your document with width: auto; min-width: fit-content;, and you've got a box that normally expands to the width of the page / column / container, but will grow beyond those limits if it's forced to by its contents. (Nice for wrapping <pre>s, if there's room to let them wander outside the normal margins.)
    – FeRD
    Commented Jun 18, 2023 at 18:03

5 Answers 5

116

fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.

0
63

In a few words width: fit-content; means :

"Use the space you can (available) but never less than your min-content and never more than your max-content"

10

the one scenario in which max-content and fit-content don't behave the same way is when you set a 'max-width' property on the element, and the viewport size is narrower than the max-width value. in this case the 'max-content' value will result in a layout in which the text will be cut arbitrarily (and the only way to see the entire text is to scroll horizontally). using the 'fit-content' value, on the other hand, will ignore the max-width property and adjust the text nicely inside the viewport.

9

As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/width the max-width simply sets the size based on the space its children needs regardless if it's available or not, while the fit-width checks if the space the children needs using max-width is available and if not, it uses the min-width instead. For further reading about the difference between max-width and min-width see http://dev.w3.org/csswg/css-sizing/#block-intrinsic.

1
  • 3
    This part is not usually true "if not, it uses the the min-width instead". @jiggunjer's answer below gives the nuance
    – dgrogan
    Commented Jun 21, 2018 at 19:39
7

It seems these two codes are the same:

.fit-content {
  width: fit-content;
}
// is same as
.fit-content {
  width: max-content;
  max-width: 100%;
  min-width: min-content;
}

In my experience I either go with width: fit-content or width: max-content; max-width: 100%. The latter is for cases when the element shouldn't have a min-width.

1
  • if you add code examples (for the situations you refer to) it would make the answer much better
    – vsync
    Commented Apr 24, 2022 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.