Cómo hacer que la altura de un DIV se expanda con su contenido

Esta pregunta se refiere a la expansión de la altura de un DIV para acomodar sus DIV internos mientras manteniendo la estructura de un contenedor DIV. Para lograr este comportamiento deseado, es esencial implementar modificaciones en el diseño CSS.

Un enfoque implica agregar un "claro: ambos;" propiedad antes de cerrar el #main_content DIV. Esta regla CSS indica al navegador que ignore cualquier elemento flotante anterior, asegurando que #main_content tenga todo el ancho disponible en el DIV del contenedor. Además, puede mover el elemento
al DIV #main_content y configurar su CSS de la siguiente manera:

.clear {
  clear: both;
}

Solución alternativa usando Flexbox

Una alternativa más moderna es utilizar Flexbox, un modo de diseño CSS3 que permite diseños flexibles y responsivos. En este enfoque, se pueden aplicar las siguientes reglas CSS:

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;
}

Estructura HTML usando Flexbox:

  

     Header   
    
  

    Content
  

El enfoque Flexbox anterior crea un diseño responsivo donde la sección de contenido se expandirá automáticamente para llenar el espacio vertical disponible mientras se ajusta a la altura de sus elementos internos.