CSS fit-content 和 max-content 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30704073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between CSS fit-content and max-content?
提问by Vandervals
I'm following this article https://css-tricks.com/almanac/properties/w/width/to try to understand how this rules work.
我正在关注这篇文章https://css-tricks.com/almanac/properties/w/width/试图了解此规则的工作原理。
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;
文章说 fit-content 可用于将未知宽度的 div 与 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.
但是如果你在这个例子中改变了 max-content 的 fit-content ，这无论如何都是有效的，而且它们似乎总是以相同的方式运行。
Does anyone know what is the difference between this two rules and in which cases should I use one or the other?
有谁知道这两个规则有什么区别，在什么情况下我应该使用其中一个？
回答by jiggunjer
fit-content uses max-content, unlessavailable < max-content, then it uses available. Unlessavailable < min-content, then it uses min-content.
fit-content 使用 max-content，除非available < max-content，然后它使用available。除非available < min-content，那么它使用min-content。
回答by Szabolcs Páll
As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/widththe 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 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.
正如你在这里看到的https://developer.mozilla.org/en-US/docs/Web/CSS/widthmax-width 只是根据它的孩子需要的空间来设置大小，而不管它是否可用，而fit-width 检查孩子需要使用 max-width 的空间是否可用，如果没有，则使用 min-width 代替。如需进一步了解 max-width 和 min-width 之间的差异，请参阅http://dev.w3.org/csswg/css-sizing/#block-intrinsic。
回答by Juanma Menendez
In a few words width: fit-content;means :
简而言之width: fit-content;就是：
"Use the space you can (available) but never less than your min-contentand never more than your max-content"
“使用您可以（可用）的空间，但绝不会少于您的空间，也min-content绝不会超过您的空间max-content”
回答by shayuna
the one scenario in which max-content and fit-content don't behave the same way is when you set a 'max-width' propertyon 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.
max-content 和 fit-content 行为方式不同的一种情况是，当您在元素上设置 'max-width'属性时，并且视口大小小于 max-width 值。在这种情况下，'max-content' 值将导致文本被任意剪切的布局（查看整个文本的唯一方法是水平滚动）。另一方面，使用 'fit-content' 值将忽略 max-width 属性并在视口内很好地调整文本。
