CSS min-content, max-content e fit-content

Aprenda sobre os valores de CSS min-content, max-content e fit-content através de exemplos práticos e saiba como melhorar seus layouts Web.

Ir para o artigo

Se você já se deparou com os valores de CSS min-content, max-content e fit-content e não entendeu muito bem para o quê servem, chegou a hora de tirar essa dúvida de uma vez por todas.

Entender as propriedades de dimensionamento de CSS é necessário para qualquer desenvolvedor que deseja flexibilidade para apresentar conteúdos de forma adequada.

Em CSS, é possível definir um tamanho de elemento usando os valores de comprimento (px, em etc.), porcentagem e palavra-chave. Embora os tipos de valor de comprimento e porcentagem sejam frequentemente usados para layouts, eles nem sempre atendem a todas as necessidades.

Em algum casos, é preciso usar os tipos de valor de palavra-chave, incluindo min-content, max-content e fit-content.

Tamanho intrínseco e tamanho extrínseco

Considere um elemento div com width e height fixas de 200px:

Para facilitar a visualização do tamanho, foi colocada uma borda na div.

div com largura e altura fixas, demonstrando o que é tamanho extrínseco.

Quando se altera o tamanho natural de um elemento aplicando um valor específico a ele, como visto na imagem acima, isso é chamado de tamanho extrínseco.

Por outro lado, quando o tamanho do conteúdo define o tamanho do elemento, isso é chamado tamanho intrínseco (ou natural).

Ao restringir a dimensão do bloco a um tamanho específico, acontece um overflow (ou “estouro de conteúdo”), que é uma desvantagem do dimensionamento extrínseco.

Mas é possível remediar o comportamento indesejado para produzir um layout melhor determinando o tamanho intrínseco do elemento a partir do conteúdo usando os valores de palavras-chave min-content, max-content e fit-content.

min-content

De acordo com a especificação do W3C, min-content é o menor tamanho que uma caixa pode ter sem acontecer overflow em seu conteúdo.

Para conteúdo horizontal, min-content usa o comprimento do pedaço de conteúdo mais largo na caixa do elemento e define automaticamente esse valor de comprimento como a largura.

O conteúdo, neste caso, inclui o texto e recursos como imagens e vídeos.

Modificando um pouco o exemplo acima, é possível aplicar min-content ao elemento assim:

Que surtirá o resultado:

div com largura igual a min-content, demonstrando tamanho intrínseco.

Com min-content, a palavra mais longa dentro do conteúdo define o tamanho da caixa; esta é a largura mínima intrínseca da caixa.

Exemplos práticos de min-content

Para demonstrar a implementação da palavra-chave min-content em cenários do mundo real, considere os casos de uso a seguir.

Legendas em imagens

Em um caso em que seja preciso colocar numa imagem uma legenda que siga sua largura, é possível usar min-content para obter o resultado desejado.

Veja o código a seguir:

Isso dá ao elemento figure uma borda para ver a extensão do tamanho.

Exemplo de elemento figure com legenda.

Como figure é um elemento de bloco, sua largura ocupa naturalmente seu elemento-contêiner.

Ao atribuir uma largura de min-content ao elemento figure, seu tamanho é definido pelo maior “pedaço” de conteúdo. Neste caso, a imagem:

Que produzirá o resultado:

Elemento figure de legenda com largura min-content.

Dimensionamento de grid e flex items

min-content também é um valor válido para propriedades de dimensionamento de Grid e Flexbox. Em CSS, a propriedade flex-basis define o tamanho da caixa de conteúdo (ou content box).

Isso torna a palavra-chave min-content um valor ideal para obter automaticamente o tamanho mínimo intrínseco da caixa.

No caso, flex-basis: min-content.

De igual maneira, ao usar CSS Grid, é possível atribuir a palavra-chave min-content às propriedades grid-template-rows ou grid-template-columns para obter o tamanho mínimo intrínseco da caixa.

Considere o seguinte código:

Trabalhando com CSS Grid e aplicando a palavra-chave min-content:

Com isso, obtém-se o valor mínimo intrínseco para a altura do conteúdo sem causar overflow.

Exemplo de o quê min-content pode fazer em conjunto com CSS Grid.

Sem min-content, obtém-se um comportamento diferente. Para ver como fica, é possível remover temporariamente as linhas de grid-template-rows e aplicar uma altura fixa ao cabeçalho:

Com isso, não se tem mais o tamanho natural do conteúdo. Nesse caso, as caixas de elementos podem ser muito grandes para seu conteúdo, causando overflow no conteúdo das caixas.

max-content

Segundo aa especificação do W3C, max-content representa o tamanho ideal de uma caixa (em um determinado eixo) quando há espaço disponível infinito.

Em outras palavras, max-content representa o tamanho que uma caixa precisa para conter todo o seu conteúdo sem “quebrar” (wrap) ou “estourar” (overflow).

Isto posto, veja este exemplo de aplicação de max-content a um tamanho de elemento:

Que resulta em:

Exemplo de aplicação de max-content em largura de conteúdo.

Aqui, o primeiro elemento assume o valor de largura padrão auto, acomodando tanto espaço quanto o contêiner permitir. Mas, ao aplicar o valor max-content à mesma caixa, obtém-se o tamanho exato do conteúdo da caixa.

O valor da palavra-chave max-content é ideal em situações em que é preciso da largura máxima do conteúdo para decidir o tamanho da caixa.

Exemplo prático de max-content

Considere uma estrutura de layout com CSS Grid, na qual se aplica max-content às colunas.

O HTML inclui:

E o CSS:

Isso renderiza a coluna com o valor max-content tomando o tamanho do conteúdo, enquanto a coluna com a unidade fr ocupa o espaço restante disponível.

Exemplo de uso de max-content com CSS Grid.

Efeito indesejável de max-content

max-content, como foi visto, funciona muito bem para o tamanho que uma caixa precisa para conter todo o seu conteúdo sem “quebrar” (wrap) ou “estourar” (overflow).

No entanto, em casos em que o elemento-pai ou ancestral não pode acomodar o tamanho da caixa, a caixa tende a overflow.

HTML de um exemplo:

E respectivo CSS:

Com este código, a largura máxima intrínseca da caixa é maior que o contêiner, causando overflow.

Em alguns casos, max-content pode causar overflow.

Em situações como essa, é necessário ajustar o conteúdo da caixa para caber no espaço disponível do contêiner.

É aí que entra a palavra-chave fit-content.

fit-content

Dependendo do tamanho de um elemento-contêiner, ao aplicar fit-content a um elemento de caixa dentro desse contêiner, a caixa fica com tamanho segundo min-content, max-content ou o contêiner disponível como seu tamanho ideal.

Quando recebe espaço disponível infinito, max-content define o tamanho ideal da caixa, no entanto, quando a viewport é mais estreita, o espaço disponível se torna o tamanho da caixa para evitar overflow até que a caixa use min-content.

Revisitando o último exemplo, aplicando fit-content ao elemento de caixa, tería-se o seguinte CSS:

Como é possível de ver abaixo, a caixa usa o espaço disponível, mas nunca se expande além de max-content e, quando a viewport é mais estreita, a caixa nunca diminui além de min-content.

A função fit-content()

A especificação do W3C também aponta que a função fit-content() permite que se defina uma largura máxima permitida para o tamanho de um elemento.

Essa função CSS geralmente dimensiona colunas e linhas de grid usando grid-template-columns e grid-template-rows, respectivamente.

fit-content() aceita uma porcentagem ou unidade de comprimento como argumento:

Tal como a palavra-chave fit-content, ao atribuir esse valor de função para determinar o tamanho em um layout usando Grid, ele usa o argumento especificado como o tamanho máximo permitido da caixa, garantindo que a caixa nunca ultrapasse max-content.

Considere o exemplo de uma estrutura de layout de grid aplicando um fit-content() à coluna:

De CSS:

O argumento passado para fit-content() diferencia as duas funções.

Na primeira coluna, foi passado 200px como argumento, portanto, a coluna tem uma largura máxima permitida de 200px e a segunda coluna tem uma largura máxima permitida de 250px. A terceira coluna ocupa o espaço restante do contêiner, pois é atribuído um valor de auto.

As caixas cujos tamanhos são definidos por fit-content() nunca se expandem além da largura especificada e também nunca vão além de max-content, mas, quando a viewport é mais estreita, a caixa pode encolher para caber no conteúdo.

Exemplo de uso da função fit-content() em conjunto com CSS Grid.

Conclusão

Esses valores de palavras-chave intrínsecos, que oferecem a flexibilidade de apresentar o conteúdo da página da maneira mais adequada, realmente podem ser usados em uma infinidade de situações de layout.

Agora você já conhece e sabe como usar os valores de palavra-chave min-content, max-content e fit-content em seus projetos.

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.