css - CSS fit-content 和 max-content 有什么区别？

Question

我正在关注这篇文章 https://css-tricks.com/almanac/properties/w/width/尝试了解此规则的工作原理。

我有这个例子:

*{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>

文章说 fit-content 可用于将宽度未知的 div 居中，margin: x auto;

但是，如果您在此示例中将 fit-content 更改为 max-content，无论如何这都是有效的，并且它们似乎总是以相同的方式运行。

有谁知道这两个规则有什么区别，在什么情况下我应该使用一个或另一个？

Answer 1

fit-content 使用 max-content，除非 available < max-content ，然后它使用可用。 除非 available < min-content ，然后它使用 min-content。