What is the difference between CSS fit-content and max-content?

Question

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:

Answer 1

As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/width the 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 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.