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

【问题标题】：What is the difference between CSS fit-content and max-content?CSS fit-content 和 max-content 有什么区别？
【发布时间】：2015-08-22 14:53:00
【问题描述】：

我正在关注这篇文章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，无论如何这仍然有效，并且它们的行为似乎始终相同。

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

【问题讨论】：

虽然caniuse.com/#feat=intrinsic-width 还没有得到很好的支持

标签： css width

【解决方案1】：

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

【讨论】：

【解决方案2】：

简而言之width: fit-content;的意思是：

“使用您可以（可用）的空间，但不要少于您的min-content，也不要超过您的max-content”

【讨论】：

【解决方案3】：

正如您在https://developer.mozilla.org/en-US/docs/Web/CSS/width 看到的那样，max-width 只是根据其孩子需要的空间来设置大小，无论它是否可用，而 fit-width 使用 max-width 检查孩子是否需要空间可用，如果不可用，则使用 min-width 代替。如需进一步了解 max-width 和 min-width 之间的差异，请参阅http://dev.w3.org/csswg/css-sizing/#block-intrinsic。

【讨论】：

这部分通常不是真的“如果不是，它使用最小宽度代替”。 @jiggunjer 在下面的回答给出了细微差别

【解决方案4】：

max-content 和 fit-content 的行为方式不同的一种情况是，当您在元素上设置“max-width”属性，并且视口尺寸变窄时比最大宽度值。在这种情况下，“最大内容”值将导致文本被任意剪切的布局（查看整个文本的唯一方法是水平滚动）。另一方面，使用 'fit-content' 值将忽略 max-width 属性并在视口内很好地调整文本。

【讨论】：

【解决方案5】：

这两个代码好像是一样的：

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

根据我的经验，我要么选择width: fit-content，要么选择width: max-content; max-width: 100%。后者适用于元素不应具有最小宽度的情况。后者也等于width: fit-content; max-width: 100%

【讨论】：