How to Make a DIV's Height Expand with its Content

This question pertains to the expansion of a DIV's height to accommodate its inner DIVs while maintaining the structure of a container DIV. To achieve this desired behavior, it's essential to implement modifications to the CSS layout.

One approach involves adding a "clear: both;" property before closing the #main_content DIV. This CSS rule instructs the browser to disregard any preceding floating elements, ensuring that #main_content has the entire available width in the container DIV. Additionally, you can move the
element into the #main_content DIV and set its CSS as follows:

.clear {
  clear: both;
}

Alternative Solution Using Flexbox

A more modern alternative is to utilize Flexbox, a CSS3 layout mode that enables flexible and responsive layouts. In this approach, the following CSS rules can be applied:

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

HTML structure using Flexbox:

  

     Header   
    
  

    Content
  

The above Flexbox approach creates a responsive layout where the content section will automatically expand to fill the available vertical space while conforming to the height of its inner elements.