# CSS min-content, max-content e fit-content
> Entenda min-content, max-content e fit-content em CSS completamente. Guia completo sobre dimensionamento intrínseco para layouts flexíveis e responsivos!
URL: https://dpw.dev/css/css-min-content-max-content-fit-content/
Publicado em: 2022-06-23
Categoria: css
Tags: css-grid, interface, web-design-responsivo
Autor: Tárcio Zemel
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`:
```html
nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor
illum praesentium ipsa minus
```
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](https://www.w3.org/TR/css-sizing-3/#min-content), `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:
```scss
.s_2
```
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:
```html
Lorem ipsum dolor sit amet consectetur adipisicing elit
```
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:
```scss
figure
```
Trabalhando com CSS Grid e aplicando a palavra-chave `min-content`:
```scss
.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:
```scss
.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:
```html
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
```
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:
```html
Lorem
Lorem ipsum dolor sit amet
Lorem ipsum dolor
```
E o CSS:
```scss
.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:
```html
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
```
E respectivo CSS:
```scss
#container
```
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:
```scss
.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](https://www.w3.org/TR/css-sizing-3/#valdef-width-fit-content-length-percentage) 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](/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/) como argumento:
```
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:
```html
Lorem ipsum dolor
Lorem ipsum dolor, sit consectetur adipisicing elit.!
Lorem
```
De CSS:
```scss
.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.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml
