22.04.2025

Esticando um div para Preencher a Largura Restante: CSS com Duas Colunas

Resposta Rápida

Se você deseja que um div ocupe o espaço restante dentro de um contêiner, aplique a propriedade flex-grow: 1;.

.container {
  display: flex;
}

.preencher-restante {
  flex-grow: 1;
}

<div class="container">
  <div>Coluna Esquerda</div>
  <div class="preencher-restante">Coluna em Esticamento...</div>
</div>

Criar um layout com duas colunas, onde a coluna da direita ocupa todo o espaço disponível, não é tão difícil!

Explicação Detalhada

Configurando o Contêiner

Primeiro, seu .container deve ser definido como um contêiner flexível:

.container {
  display: flex; /* Isso define as regras para as relações internas! */ 
  height: 100%; /* O objetivo é usar completamente o volume disponível! */ 
}

Para fazer o div preencher totalmente o espaço vertical do contêiner, configure height: 100%;. Lembre-se de que a altura de 100% também deve ser definida para html e body.

Coluna Esquerda com Conteúdo Dinâmico

A coluna da esquerda é destinada a conteúdo dinâmico e deve ter uma largura escalável. Não há necessidade de propriedades flex aqui; basta usar width: auto;, ou, se necessário, definir largura mínima e máxima:

.largura-variavel {
  width: auto; /* ou min-width/max-width */
}

Esticando a Coluna da Direita

Para fazer a coluna da direita se expandir e ocupar todo o espaço restante, utilize flex-grow: 1;:

.preencher-restante {
  flex-grow: 1; /* Crescemos à medida que as oportunidades aumentam! */
  overflow: hidden; /* Como um ninja, permaneço discreto e eficaz! */
}

A propriedade overflow: hidden; ajuda a evitar várias dificuldades relacionadas à geometria interna dos elementos.

Evitando Sobreposições

Com um contêiner flexível, você não precisa se preocupar com elementos se sobrepondo — como acontece com elementos flutuantes. O Flexbox é perfeito para criar layouts responsivos e flexíveis.

Visualizando o Layout

Durante o desenvolvimento, pode ser útil para o desenvolvedor usar cores de fundo ou bordas temporariamente para representar visualmente o layout:

.largura-variavel {
  background-color: lightblue; /* Veja onde tudo está posicionado! */
}

.preencher-restante {
  background-color: lightgreen; /* Brilhante por enquanto, mas é temporário! */
}

Não se esqueça de remover essas marcas visuais antes de publicar para manter a limpeza e a neutralidade da interface.

A Magia do Calc

Quando o tamanho da coluna precisa ser determinado pelo conteúdo ou por outros fatores, a função calc() é útil para cálculos matemáticos precisos:

.preencher-restante {
  width: calc(100% - 200px); /* A matemática está sempre em vigor! */
}

Isso garante que o tamanho da coluna da direita se adapte às mudanças no tamanho do elemento acompanhante.

Contabilizando Navegadores Antigos

Se o suporte para navegadores legados como IE6/7 for necessário, considere suas peculiaridades, como hasLayout. No entanto, com o advento do flexbox no desenvolvimento web moderno, isso se torna cada vez menos relevante.

Visualização

Para clareza, uma forma de visualizar essa tarefa é como um trem (🚆) chegando a uma estação (🚉), precisando ocupar todo o espaço livre:

Comprimento da Plataforma: |==============================|
Comprimento do Trem:      |========🚆                    |

Sua tarefa é criar condições que permitam que o trem estique-se para preencher toda a plataforma:

|==============================|
|========🚆====================|

Da mesma forma, seu div será esticado para preencher todo o espaço disponível na plataforma usando flex-grow: 1.

Aprendendo a Trabalhar com Flexbox

Flexbox — Uma Ferramenta para Alinhamento e Distribuição

Flexbox fornece ferramentas para alinhar e distribuir espaço entre elementos dentro de um contêiner:

.container {
  align-items: stretch; /* Hora de se esticar! */
  justify-content: flex-start; /* Todos no seu lugar! */
}

Considerações de Design Responsivo

Media queries permitem ajustes no layout com base em diferentes tamanhos de tela:

@media (max-width: 600px) {
  .container {
    flex-wrap: wrap; /* Gerenciando o espaço ocupado. */
  }

  .preencher-restante {
    width: 100%; /* Tamanho importa! */
  }
}

Evitando CSS Caótico

Para manter a ordem e a limpeza no seu código CSS:

• Agrupe seletores de tipo semelhante.
• Coloque propriedades frequentemente usadas no início da folha de estilos.
• Use propriedades abreviadas.
• Comente seu código para facilitar a compreensão.

Recursos Úteis

1. Guia Completo do Flexbox por CSS-Tricks — Aprender Flexbox está ao seu alcance.
2. Guia Completo do CSS Grid por CSS-Tricks — Aprenda CSS Grid para total controle sobre o layout.
3. Modelo de Caixa no Desenvolvimento Web por MDN — Fundamentos do modelo de caixa CSS.
4. Conceitos Básicos de Flexbox por MDN — Uma introdução ao flexbox para iniciantes.
5. Vários Casos de Uso para Calc() por CSS-Tricks — calc() – a mágica do CSS!
6. Posso usar... para suporte ao Flexbox — Verifique a compatibilidade do Flexbox com vários navegadores.
7. Posso usar... para suporte ao CSS Grid — Aprenda sobre o suporte do CSS Grid nos navegadores.

Video

Navigation