2

Recentemente me deparei com esses dois valores para o width de um elemento, no entanto não entendi como usa-los e para que servem...

Isso é o que diz a documentação da Mozilla, mas eu não entendi:

max-content A largura intríseca preferida. (width: min-content)
                      ------------------------------------------------
min-content A largura intríseca mínima preferida. (width: max-content)
                      -------------------------------------------------------------

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/max-width

O que seriam essas valores de fato, e como os elementos se comportam com eles?
Esses valores já são aceitos por todos os browsers?

Se possível gostaria de um ou dois exemplos didáticos :)

1 Resposta 1

4

Recomendo ler este artigo.

Primeiro, esta imagem exemplifica bem o funcionamento de min e max content para width(texto em inglês): Exemplo do uso de Min e Max Content - CSS

Agora, um código que produz resultado semelhante ao da imagem, baseado no conteúdo disponível em 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.

Resultado: Resultado do uso de Max e Min Content

3
  • 1
    Neto está meio confuso o texto... Olha isso O tamanho menor que uma caixa pode levar que não leva ao estouro que poderia ser evitado escolhendo um tamanho maior. Não me ajudou muito... E os exemplos que vc linkou são sobre max-width e min-width, não sobre width: min-content e width: max-content
    – hugocsl
    4/12/2018 às 12:02
  • 1
    Neto nesse caso te sugiro editar a sua resposta remover os exemplos que estão equivocados nela, rever os texto traduzidos acredito pois não fazem sentido está difícil de entender-los. E coloque os novos exemplos direito como código na resposta, use o ícono ao lado do ícone da imagem para incluir o código na sua resposta. Assim fica mais claro e a resposta preserva o conteúdo caso o link externo pare de funcionar
    – hugocsl
    4/12/2018 às 12:47
  • 1
    O texto não ajudou muito, se vc puder explicar o funcionamento dos novos exemplos ai sim ficaria algo interessante. Pois a duvida é entender como esses atributos funcionam quando aplicados no elemento. Só um código como exemplo sem explicação alguma não ajuda muito
    – hugocsl
    4/12/2018 às 12:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .