Curso de CSS / Largura, altura e limites min/max com box-sizing

As propriedades CSS width e height definem dimensões preferidas, enquanto min-width, max-width, min-height e max-height impõem limites. Com box-sizing: border-box, as dimensões declaradas incluem padding e bordas, mas um limite de altura ainda precisa de uma estratégia deliberada de overflow.

Compare content-box e border-box

Dê aos dois cartões width: 300px, 20px de padding em cada lado e bordas de 2px. Com content-box, o conteúdo é de 300px e o border-box é de 344px. Com border-box, o border-box é de 300px e o conteúdo é de 256px. A margem está fora da largura declarada em ambos os casos. Veja O Modelo de Caixa CSS: Conteúdo, Padding, Borda e Margem.

border-box mantém o preenchimento e as bordas dentro do tamanho declarado. Aumentar o preenchimento reduz a largura disponível para o conteúdo e pode aumentar a quebra de linha. Se apenas o preenchimento e as bordas excederem a largura declarada, o conteúdo não pode se tornar negativo, portanto, a caixa real pode exceder essa largura. Veja MDN: box sizing.

*, *::before, *::after { box-sizing: border-box; }

Regras comuns que podem ser usadas para unificar métodos de cálculo em novos documentos. Também incluímos pseudo-elementos para serem calculados da mesma forma. Se você aplicar isso a páginas existentes em lotes, o layout criado com base no content-box pode mudar, então verifique a área necessária primeiro. O exemplo completo aplica as regras comuns, mas reassocia o content-box apenas para .content para comparação.

Defina larguras fluidas e limites mínimos ou máximos

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% é baseada na largura do bloco contêiner, e max-width limita seu crescimento em telas largas. Sob a condição de que o tamanho da fonte raiz é de 16px, 32rem é 512px. min-width é o limite inferior de quão pequeno ele pode ser. Mesmo que a tela seja mais estreita que 180px, manter a largura mínima pode causar transbordamento horizontal.

Uma restrição mínima prevalece quando entra em conflito com uma máxima: min-width: 360px com max-width: 320px não permite que a caixa encolha abaixo de 360px. As restrições de altura correspondentes se comportam de forma semelhante. Os tamanhos mínimos automáticos de Flexbox e Grid requerem suas próprias verificações; use min-width: 0 quando apropriado. Veja MDN: largura mínima, MDN: altura mínima.

Compare alturas automáticas, fixas e restritas

Um limite de altura não remove automaticamente o texto que excede o espaço. O overflow padrão pode exibir o texto fora da caixa; hidden pode cortar informações que o leitor precisa. Ao combinar altura máxima com rolagem, também verifique o acesso por teclado e a interação em dispositivos móveis. O exemplo completo deixa espaço extra após as caixas para que você possa observar a falha da altura fixa. Se uma caixa não encolher como esperado, também revise CSS Overflow, Quebra de Texto Longo e Reticências.

Entenda as condições de altura em porcentagem

.height-parent { height: 200px; }

.half { height: 50%; }

No fluxo normal de blocos, um elemento pai com altura explícita de 200px permite que um filho em height: 50% tenha sua altura resolvida para 100px. Se a altura do pai depende do conteúdo, esse cálculo simples geralmente é resolvido como auto. Apenas um min-height não fornece a mesma condição. Posicionamento absoluto, Flexbox e Grid podem ter regras diferentes de resolução de porcentagem. Veja MDN: height.

Execute o exemplo e compare as dimensões

Salve o código abaixo como UTF-8 em sizing.html. Ele inclui dois cálculos de largura, um limite de tamanho e uma comparação de altura usando o mesmo texto.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. Verifique a largura real de .content e .border em uma janela ampla. Elas são 344px e 300px, respectivamente. Se você alterar apenas o padding da content-box para 30px, será 364px, e a largura externa da border-box será 300px mesmo após a mesma alteração.
2. Reduza a largura da janela para ver se o .fluid encolhe com seu elemento pai. Em uma janela ampla com um root de 16px, o máximo é 512px. Se você alterar temporariamente min-width em .limits para 360px, será maior que o max-width de 320px. Restaure 180px após conferir.
3. Acrescente as mesmas frases de texto aos parágrafos HTML das quatro caixas de comparação de altura; não acrescente declarações CSS. A altura fixa deve transbordar para fora dos limites, auto e min-height devem crescer conforme necessário, e o painel de max-height deve ser legível com rolagem interna.
4. Remova height: 200px do elemento pai. Verifique se a altura de 50% do filho não permanece em 100px e restaure a declaração original para garantir que ela volte a ser 100px novamente.
5. Aumente o zoom do navegador e observe como o painel de altura fixa pode deixar o texto transbordar ou sobrepor o conteúdo seguinte. Essa falha é intencional neste exemplo: compare-a com auto e min-height e escolha uma altura que preserve a leitura. Como body fixa a fonte em 16px, mudar apenas a fonte padrão do navegador pode não aumentar esse texto; o zoom e a fonte padrão são testes diferentes.

width: 100%, mas se houver transbordamento horizontal, verifique box-sizing, margens esquerda e direita, min-width grande e string longa, nessa ordem. Não confunda o tamanho do conteúdo exibido nas Ferramentas de Desenvolvedor com o tamanho da borda. Após alterar o valor, reverta para a declaração original para manter a condição de comparação.