What are max-content and min-content width values and how do they work?

Question

I recently came across these two values for the width of an element, however I did not understand how to use them and what they serve...

That’s what the Mozilla documentation says, but I don’t get it:

max-content The preferred intrinsic width. (width: min-content)
                      ^{------------------------------------------------}
min-content The preferred minimum intrinsic width. (width: max-content)
                      ^{-------------------------------------------------------------}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

What would these values actually be, and how the elements behave with them?
These values are already accepted by all browsers?

If possible I would like one or two didactic examples :)

Answer 1

I recommend reading this article.

First, this image exemplifies well the operation of min and max content for width(English text):

Now, a code that produces a result similar to the image, based on the content available in MDN Web Docs:

CSS:

p.douradinho-max {
  background: gold;
  width: -moz-max-content;
}

p.douradinho-min {
  background: gold;
  width: -moz-min-content;
}

HTML:

<p class="douradinho-max">A comunidade Mozilla produz diversos softwares incríveis.</p>
Aqui, a largura assume o valor necessário para agrupar todo o texto em uma linha, ou seja, o valor máximo do conteúdo.
<p class="douradinho-min">A comunidade Mozilla produz diversos softwares incríveis.</p>
Aqui, a largura assume o valor da maior palavra da frase("comunidade"), assim, o valor mínimo de largura necessário para agrupar toda a frase.

Upshot: