How to make div height expand with its content using CSS?

When designing a webpage, it's important to make sure a div adjusts its height based on the content inside it. This is key to creating a flexible and responsive layout, especially when the content changes or is unpredictable. Using CSS, you can easily make a div adapt to different content sizes. One of the most common ways to do this is by setting height: auto;, which allows the div to grow or shrink depending on its content. In fact, around 85–90% of responsive web designs use this method to handle content that varies in size.

Why Make a Div's Height Adapt to Its Content?

• Flexibility: Allows the container to resize automatically based on its content, accommodating different text lengths, images, or dynamic content.
• Responsive Design: Ensures the layout adjusts across different devices and screen sizes, enhancing the overall user experience.
• Simplifies Maintenance: Reduces the need for manual adjustments, making your code cleaner and easier to manage.

Syntax

height: length | percentage | auto | initial | inherit;

Property Values

Example 1: Using height: auto;

The height: auto; property allows a div to automatically adjust its height based on the content inside it. This is the most straightforward way to create a responsive container that grows or shrinks with the content.

Output:

Example 2: Using height: inherit;

The height: inherit; property allows a div to inherit its height from its parent element. This is useful when you want the child element's height to match or be influenced by its parent’s height settings.

Output: