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

Question

Aryan Kumar · Answer

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:

.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:

.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.

forum

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

Can you answer this question?

1 Answers