title: What is the difference between CSS fit-content and max-content?
body: <p>I'm following this article <a href="https://css-tricks.com/almanac/properties/w/width/" rel="noreferrer">https://css-tricks.com/almanac/properties/w/width/</a> to try to understand how this rules work.</p>
  <p>I have this example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{margin:0; padding:0}
  .box{
    background: lightgreen;
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" /&gt;
    &lt;figure&gt;Yes, put some text here that is wider than the image above to try some new rules&lt;/figure&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The article says that <code>fit-content</code> can be used to center a div of unknown width with <code>margin: x auto;</code></p>
  <p>But if you change <code>fit-content</code> for <code>max-content</code> in this example, this is working anyway and they seem to behave always in the same way.</p>
  <p>Does anyone know what is the difference between this two rules and in which cases should I use one or the other?</p>