11.01.2025

Como Expandir a Altura de um <div> Pai Usando CSS

Resposta Rápida

Para garantir que a altura de um <div> pai se ajuste automaticamente ao tamanho de seus elementos filhos, você pode utilizar CSS Flexbox. Defina a propriedade display do elemento pai como flex e a propriedade flex-direction como column. Como resultado, o <div> pai redimensionará de acordo com a altura de seus elementos filhos:

<div style="display: flex; flex-direction: column;">
  <div style="height: 50px; background: lightblue;"></div>
  <div style="height: 100px; background: lightcoral;"></div>
</div>

Gerenciando Overflow

Para controlar a exibição de barras de rolagem e evitar problemas desnecessários, aplique o estilo overflow: auto; ao <div> pai:

.pai {
  overflow: auto;
}

Exibição em Tabela

Se você preferir uma representação em forma de tabela, use display: table; para o pai e display: table-row; para os elementos <div> filhos:

.pai {
  display: table;
}

.filho {
  display: table-row;
}

Simplificação do Conteúdo

Para otimizar a "otimização" do conteúdo, é aconselhável usar height: max-content; no <div> pai:

div.pai {
  height: max-content;
}

Posicionando Elementos Flutuantes

Se os elementos filhos utilizam a propriedade float, considere adicionar um pseudo-elemento com clear: both; ao elemento pai:

.pai::after {
  content: "";
  display: table;
  clear: both;
}

Note que se você não precisar de uma barra de rolagem, pode remover a propriedade overflow: auto;.

Solução Inline-Block

Uma abordagem alternativa é usar display: inline-block; para o <div> pai, que ainda é relevante para versões mais antigas de navegadores:

div.pai {
  display: inline-block;
}

Visualização

Aqui está uma representação visual do conceito utilizando emojis:

Filho ⭐	Filho 🌟	Filho 🌠

Você pode imaginar ajustar a altura do <div> pai como um telescópio que se estende para abraçar todas as "estrelas" — os elementos filhos:

🔭
(Expandindo para englobar todos os filhos)

⭐ 🌟 🌠

Gerenciando a Altura Mínima

Para flexibilidade, utilize min-height para que o <div> possa se expandir com base em seu conteúdo:

div.pai {
  min-height: 100px;
}

Controle de Rolagem em Nível de Página

Se a rolagem for necessária em nível de página, configure através de html e body:

html, body {
  height: 100%;
  overflow: auto;
}

Fazendo Modificações

Agora você pode acessar o jsfiddle para um exemplo visual da aplicação de um dos métodos mencionados.

Técnicas Avançadas com will-change

Para preparar o navegador para alterações futuras e melhorar o desempenho, use a propriedade will-change em propriedades que você espera modificar:

div.pai {
  will-change: height;
}

Gerenciamento de Quebras no Flexbox

Se você precisar gerenciar a quebra de elementos filhos para uma nova linha, aplique flex-wrap dentro do CSS Flexbox:

div.pai {
  display: flex;
  flex-wrap: wrap;
}

Isso permitirá que os elementos filhos se movam para uma nova linha quando o espaço acabar.

Recursos Úteis

1. Guia de Flexbox por CSS-Tricks
2. Noções Básicas de Flexbox no MDN Web Docs
3. Visão Geral dos Métodos de Limpeza de Float por SitePoint
4. Tutorial do Método Clearfix por w3schools
5. Lista de Recursos sobre Flexbox pela Smashing Magazine
6. Guia da Propriedade will-change por CSS-Tricks
7. Quebra de Itens Flexíveis no Flexbox no MDN Web Docs

Video

Navigation