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:
|
1 2 3 4 |
<div class="s_1"> nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor illum praesentium ipsa minus </div> |
Para facilitar a visualização do tamanho, foi colocada uma borda na div.
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:
|
1 2 3 4 5 |
.s_2 { /* ... */ width: min-content; /* ... */ } |
Que surtirá o resultado:
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:
|
1 2 3 4 5 6 7 8 9 10 |
<figure> <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" alt="lorem ipsum" /> <figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit </figcaption> </figure> |
Isso dá ao elemento figure uma borda para ver a extensão do tamanho.
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:
|
1 2 3 4 |
figure { /* ... */ width: min-content; } |
Que produzirá o resultado:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="grid"> <header class="header"> <!-- ... --> </header> <div class="content"> <!-- ... --> </div> <div class="footer"> <!-- ... --> </div> </div> |
Trabalhando com CSS Grid e aplicando a palavra-chave min-content:
|
1 2 3 4 5 |
.grid { display: grid; grid-template-rows: min-content auto min-content; height: 100vh; } |
Com isso, obtém-se o valor mínimo intrínseco para a altura do conteúdo sem causar overflow.
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:
|
1 2 3 4 5 6 7 8 9 10 |
.grid { ... /* grid-template-rows: min-content auto min-content; */ ... } .header { ... height: 40px; } |
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:
|
1 2 3 4 |
<div id="container"> <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> <div class="item2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> </div> |
Que resulta em:
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:
|
1 2 3 4 5 |
<div class="container"> <div>Lorem</div> <div>Lorem ipsum dolor sit amet</div> <div>Lorem ipsum dolor</div> </div> |
E o CSS:
|
1 2 3 4 5 |
.container { display: grid; grid-template-columns: 1fr max-content max-content; /* ... */ } |
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.
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:
|
1 2 3 |
<div id="container"> <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> </div> |
E respectivo CSS:
|
1 2 3 4 5 6 7 8 9 |
#container { /* ... */ width: 200px; } .item1 { width: max-content; /* ... */ } |
Com este código, a largura máxima intrínseca da caixa é maior que o contêiner, causando 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:
|
1 2 3 4 |
.item1 { width: fit-content; /* ... */ } |
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:
|
1 |
fit-content(percentage | length) |
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:
|
1 2 3 4 5 6 7 |
<div class="container"> <div>Lorem ipsum dolor</div> <div> Lorem ipsum dolor, sit consectetur adipisicing elit.! </div> <div>Lorem</div> </div> |
De CSS:
|
1 2 3 4 5 |
.container { display: grid; grid-template-columns: fit-content(200px) fit-content(250px) auto; /* ... */ } |
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.
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.