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

Asked

Viewed 825 times

2

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 :)

1 answer

4


I recommend reading this article.

First, this image exemplifies well the operation of min and max content for width(English text): Exemplo do uso de Min e Max Content - CSS

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: Resultado do uso de Max e Min Content

  • 1

    Grandson is a little confused the text... Look at this The smaller size that a box can lead that does not lead to overflow that could be avoided by choosing a larger size. It didn’t help me much... And the examples you linked are about max-width and min-width, not about width: min-content and width: max-content

  • 1

    Grandson in this case I suggest you edit your answer remove the examples that are wrong in it, review the translated text I believe because they do not make sense is difficult to understand them. And put the new examples right as code in the reply, use the icon next to the image to include the code in your reply. This makes it clearer and the answer preserves the content if the external link stops working

  • 1

    The text did not help much, if you can explain the functioning of the new examples there would be something interesting. Because the doubt is to understand how these attributes work when applied to the element. Only a code as an example without any explanation does not help much

Browser other questions tagged

You are not signed in. Login or sign up in order to post.