---
title: "How can I transition height: 0; to height: auto; using CSS?"  
description: "How can I transition height: 0; to height: auto; using CSS?"  
author: "Revati S Misra"  
published: 2023-04-24  
updated: 2023-04-26  
canonical: https://www.mindstick.com/forum/157991/how-can-i-transition-height-0-to-height-auto-using-css  
category: "css-css3"  
tags: ["html", "css", "css position"]  
reading_time: 2 minutes  

---

# How can I transition height: 0; to height: auto; using CSS?

How can I [transition](https://answers.mindstick.com/qa/94090/a-material-is-dimensionally-stable-at-room-temperature-if-its-glass-transition-temperature-tg-is) height: 0; to height: [auto](https://www.mindstick.com/forum/33810/remote-view-in-android-auto-cancel-custom-notification); using [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)?

## Replies

### Reply by Aryan Kumar

Transitioning from `height: 0` to `height: auto` using CSS is not possible because the `height` property cannot be transitioned to or from "auto". This is because "auto" is not a specific value, but rather a computed value based on the content inside the element.

However, there are a few workarounds that you can use to create the illusion of transitioning from `height: 0` to `height: auto`. Here are a few methods:

1. **Use a fixed height:** If you know the maximum height that the element will need to be, you can set a fixed height and transition between that and `height: 0`. For example:

```css
.container {
 height: 0;
 overflow: hidden;
 transition: height 0.3s ease;
}
.container.open {
 height: 200px;
}
```

In this example, we're setting the `height` property of `.container` to 0 and using `overflow: hidden` to hide the content inside. When we add the `.open` class to the container, we're setting the `height` property to a fixed value of 200px, which will expand the container and reveal the content inside.

2. **Use max-height:** Alternatively, you can use `max-height` instead of `height` to allow the element to expand to fit its content. For example:

```css
.container {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease;
}
.container.open {
 max-height: 200px;
}
```

In this example, we're setting the `max-height` property of `.container` to 0 and using `overflow: hidden` to hide the content inside. When we add the `.open` class to the container, we're setting the `max-height` property to a value of 200px, which will allow the container to expand to fit its content.

Note that both of these methods have their limitations and may not work for all scenarios. It's important to test and adjust the CSS styles based on your specific requirements and layout.


---

Original Source: https://www.mindstick.com/forum/157991/how-can-i-transition-height-0-to-height-auto-using-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.