Propriedade Max-Height
Última atualização: 2026-09-13
max-height Propriedade Max-Height
A propriedade max-height define a altura máxima de um elemento, evitando que ele fique muito alto e quebre o layout. Seu valor padrão, none, significa que não há limite superior. É frequentemente combinada com overflow:auto para que conteúdo mais alto que o limite mostre uma barra de rolagem, um padrão comum para regiões roláveis de altura fixa.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | non-replaced |
| Tipo de Animação | length |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
max-height: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem altura máxima. |
<length> | Tipo | Uma altura máxima fixa. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O max-height precisa ser combinado com overflow; caso contrário, o conteúdo transbordará o contêiner.
❓ Perguntas Frequentes
QO que acontece quando max-height e height são definidos juntos?
AA altura real é a menor das duas. Com height:100px e max-height:80px, o elemento renderiza em 80px; com height:100px e max-height:150px, renderiza em 100px. Se o conteúdo for mais curto que a altura definida, o elemento usa a altura do conteúdo. Para limitar a altura e tratar o transbordamento, você também precisa da propriedade overflow, ou o excesso vazará visivelmente.
QComo crio uma região rolável de altura fixa?
ADê ao contêiner um max-height mais overflow-y:auto, por exemplo .list { max-height:300px; overflow-y:auto; }. Quando o conteúdo está abaixo de 300px nenhuma barra de rolagem aparece; quando excede o limite, surge uma barra de rolagem vertical. Este é o padrão para logs de chat, listas de notificação e painéis semelhantes, e max-height é melhor que height aqui porque conteúdo curto não deixa espaço vazio enquanto conteúdo longo ainda rola.
QComo mostro uma reticência quando o texto transborda?
APara uma única linha, use white-space:nowrap combinado com overflow:hidden e text-overflow:ellipsis. Para várias linhas, use -webkit-line-clamp:2 junto com a família de propriedades -webkit-box mais overflow:hidden, que depende do prefixo -webkit-. Em ambos os casos, o texto transbordante é cortado e substituído por uma reticência, e o restante oculto não pode ser rolado para visualização, então reserve um atributo title para o texto completo.
QO max-height pode ser definido como 0?
ASim. O max-height:0 reduz a altura do elemento a zero e é comumente usado para animações de recolher e expandir: comece com max-height:0 mais overflow:hidden para esconder e então faça a transição para um valor grande o suficiente para expandir. É o hack clássico de animação de altura em CSS; hoje em dia o mesmo efeito é melhor obtido transitando grid-template-rows entre 0fr e 1fr, o que evita o valor arbitrário de max-height por completo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
