What are the max-content and min-content width values?

Navigation
1

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

This is what the Mozilla documentation says, but I did not understand:

max-content The preferred intrinsic width. (width: min-content)
----------------------------------------------- -
min-content The preferred minimal intrinsic width. (width: max-content)
----------------------------------------------- --------------

Source: link

  

What would these values really be, and how do the elements behave with them?   Are these values already accepted by all browsers?

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

    
asked by anonymous 04.12.2018 / 12:13

1 answer

3

I recommend reading this article .

First, this image exemplifies well the min and max content for width operation:

Nowacodethatproducesasimilarresulttotheimage,basedonthecontentavailableat 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.

Result:

    
04.12.2018 / 12:33
Transform 2 php array into a single array Problem in changing background color