csswidth

What is the difference between CSS fit-content and max-content?

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?

Solution

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