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?
fit-content
can often be of more use as amin-
ormax-width
value, rather than awidth
. For example, style a<div>
in your document withwidth: auto; min-width: fit-content;
, and you've got a box that normally expands to the width of the page / column / container, but will grow beyond those limits if it's forced to by its contents. (Nice for wrapping<pre>
s, if there's room to let them wander outside the normal margins.)