Propriedade CSS max-height

A propriedade max-height define a altura máxima até a qual um elemento pode crescer. O elemento pode ser mais baixo que esse valor, mas nunca será mais alto. Se a propriedade height estiver definida com um valor maior, max-height a substitui e limita o elemento.

Isso é útil sempre que você tem conteúdo de comprimento desconhecido ou variável — uma caixa de comentários, um painel dropdown, uma janela de chat, uma imagem ou um card — e deseja evitar que ele empurre o restante do layout. Combine max-height com a propriedade overflow para que o conteúdo mais alto que o limite role em vez de transbordar visivelmente.

Esta página abrange a sintaxe, todos os valores aceitos, como max-height interage com min-height e height, e padrões comuns do mundo real.

Como max-height é resolvido

Quando mais de uma propriedade relacionada à altura se aplica, o navegador as resolve em uma ordem fixa de precedência:

min-height prevalece sobre max-height que prevalece sobre height

Em outras palavras, se você definir height: 100px; max-height: 50px, o elemento será renderizado com 50px (max vence). Mas se você também definir min-height: 80px, o elemento será renderizado com 80px (min prevalece sobre max). Essa ordem importa quando várias regras colidem — min-height sempre tem a palavra final.

Cuidado com porcentagens: um max-height em porcentagem é resolvido em relação à altura do bloco contentor. Se esse pai não tiver altura explícita (sua altura é auto), a porcentagem não tem nada concreto para medir e max-height se comporta como none.

Valor Inicial	none
Aplica-se a	Todos os elementos, exceto elementos inline não substituídos, colunas de tabela e grupos de colunas.
Herdado	Não.
Animável	Sim. A altura é animável.
Versão	CSS2
Sintaxe DOM	object.style.maxHeight = "50px";

Sintaxe

Sintaxe da Propriedade CSS max-height

max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;

Exemplo com valor fixo em px

No exemplo abaixo, o parágrafo é limitado a 50px. Como o texto é mais longo que isso, overflow: auto adiciona uma barra de rolagem para que o conteúdo permaneça legível sem quebrar o layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        max-height: 50px;
        overflow: auto;
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo com valor em cm

Aqui, o primeiro parágrafo não tem limite (max-height: none), enquanto o segundo é limitado a 2cm. Isso mostra como o mesmo conteúdo se comporta com e sem limite lado a lado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1 {
        max-height: 2cm;
        overflow: auto;
        border: 1px solid #666;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo com valores de porcentagem e calc()

Ambas as caixas abaixo têm uma height explícita, portanto os valores de porcentagem e calc() têm uma referência para resolver. A primeira é limitada à metade de sua própria altura; a segunda usa calc() para deixar uma margem de 50px abaixo do limite.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .percent-example {
        max-height: 50%;
        overflow: auto;
        border: 1px solid #666;
        height: 200px;
      }
      .calc-example {
        max-height: calc(100% - 50px);
        overflow: auto;
        border: 1px solid #666;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: 50%;</h3>
    <p class="percent-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: calc(100% - 50px);</h3>
    <p class="calc-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
none	Valor padrão. Nenhuma altura máxima é definida.	Experimente »
length	Define uma altura máxima fixa em px, pt, cm, etc.	Experimente »
percentage	Define a altura máxima como uma porcentagem da altura do bloco contentor.	Experimente »
calc()	Calcula a altura máxima usando uma expressão.	Experimente »
max-content	Define a altura máxima para o tamanho máximo intrínseco do conteúdo.	Experimente »
min-content	Define a altura máxima para o tamanho mínimo intrínseco do conteúdo.	Experimente »
fit-content	Define a altura máxima para o tamanho fit-content.	Experimente »
initial	Define esta propriedade para seu valor padrão.	Experimente »
inherit	Herda esta propriedade do elemento pai.	Experimente »

Casos de uso comuns

Painéis roláveis. Um dropdown, barra lateral ou log de chat que nunca deve ultrapassar o viewport: defina max-height mais overflow-y: auto.
Imagens responsivas. img { max-height: 80vh; } evita que uma imagem alta ultrapasse a altura da tela, enquanto ainda reduz em viewports menores.
Seções recolhíveis / "leia mais". Anime max-height de um valor pequeno para um maior para revelar conteúdo oculto com uma transição CSS (animar max-height funciona onde animar height: auto não funciona).
Cards com aparência uniforme. Limitar max-height nos corpos dos cards evita que um card em uma grade cresça desproporcionalmente.

Dicas e armadilhas

max-height define apenas um teto — ela não força um elemento a ter aquela altura. Use height ou min-height para isso.
Sem um valor de overflow, o conteúdo mais alto que max-height simplesmente transborda da caixa. Adicione overflow: auto (rolagem) ou overflow: hidden (recorte) para controlá-lo.
Um max-height em porcentagem precisa que o pai tenha uma altura resolvida; caso contrário, é ignorado.
Lembre-se de que border e padding contam para a caixa a menos que você defina box-sizing; o content-box padrão mede max-height apenas em relação à área de conteúdo.
Existe uma propriedade equivalente para largura: veja max-width.

Prática

Qual é a função da propriedade 'max-height' no CSS?

Ela define a altura máxima para um elemento.Ela define a altura mínima para um elemento.Ela limita a largura de um elemento.Ela garante que a altura de um elemento não ultrapasse um determinado valor.Ela redefine a altura de um elemento para 'auto'.