Como fazer a altura de um DIV expandir com seu conteúdo

Esta questão refere-se à expansão da altura de um DIV para acomodar seus DIVs internos enquanto mantendo a estrutura de um contêiner DIV. Para alcançar esse comportamento desejado, é essencial implementar modificações no layout CSS.

Uma abordagem envolve adicionar um "clear: Both;" propriedade antes de fechar o DIV #main_content. Esta regra CSS instrui o navegador a desconsiderar quaisquer elementos flutuantes anteriores, garantindo que #main_content tenha toda a largura disponível no contêiner DIV. Além disso, você pode mover o elemento
para o DIV #main_content e definir seu CSS da seguinte forma:

.clear {
  clear: both;
}

Solução alternativa usando Flexbox

Uma alternativa mais moderna é utilizar Flexbox, um modo de layout CSS3 que permite layouts flexíveis e responsivos. Nesta abordagem, as seguintes regras CSS podem ser aplicadas:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

Estrutura HTML usando Flexbox:

  

     Header   
    
  

    Content
  

A abordagem Flexbox acima cria um layout responsivo onde a seção de conteúdo se expandirá automaticamente para preencher o espaço vertical disponível enquanto se adapta à altura de seus elementos internos.