Menu
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?
591
fit-content() The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)) .
The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.
max-content determines a size assuming that there is infinite available space. On the other hand, min-content defines an element's minimal possible size that does not lead to overflowing content.
The fit-content behaves as fit-content(stretch) . In practice this means that the box will use the available space, but never more than max-content . When used as laid out box size for width , height , min-width , min-height , max-width and max-height the maximum and minimum sizes refer to the content size.
fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.
188
In a few words width: fit-content; means :
"Use the space you can (available) but never less than your min-content and never more than your max-content"
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
