# Animating height: auto in CSS

> Modern CSS technique for smooth height transitions without fixed pixel heights

Demonstrates how to achieve smooth expand and collapse animations on elements with dynamic or intrinsic content size. It solves a long-standing CSS limitation for components like accordions and collapsible sidebars without requiring JavaScript height calculations. Modern implementations typically rely on CSS Grid row interpolation or the newer calc-size() and interpolate-size properties.

## How it works

Tip from @pqoqubbw: you can animate height:auto in CSS. The demo animates a documentation sidebar: nav sections (Playground, Models, Documentation, Settings) expand to reveal nested items (History, Settings; Genesis; Introduction, Get Started, Tutorials, Changelog; General, Team, Billing, Limits) and collapse back, all with fluid motion and no jumpiness; the sidebar's overall height also animates as content is added or removed. No code is shown in the video; typical implementations use grid-template-rows 0fr -\> 1fr with overflow hidden, or the newer calc-size()/interpolate-size approach.

## What it is for

- Animate collapsible accordion menus without hardcoding fixed pixel heights
- Create smooth auto-sizing sidebars and dropdown menus
- Transition container heights dynamically when content is added or removed

## Key points

- Eliminates the need for JavaScript-based height measurement hacks
- Achievable via CSS Grid grid-template-rows interpolation (0fr to 1fr)
- Compatible with modern CSS interpolate-size and calc-size() specifications
- Prevents visual stuttering and abrupt content jumping during expansion

## Pricing

Free

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: no
- Platforms: Web
- For: Front-end developers and UI engineers
- Alternative to: JavaScript height measurement animations, max-height CSS animation hacks
- Tags: css, animation, web dev, frontend, ui

## Why it was saved

- [@pqoqubbw, 20 April 2025](https://x.com/pqoqubbw/status/1913957470461894930): Animating height:auto is a long-standing pain point; this shows a fluid production-quality approach that works for accordions and self-sizing containers.

## Related

- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)
- [React Bits Micro](https://xiry.app/resources/react-bits-micro): Free, animated micro-interaction components for React interfaces (Web app, Freemium)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)
- [GSAP](https://xiry.app/resources/gsap): High-performance JavaScript animation library for web elements, SVG, and canvas. (Website, Freemium)

Updated 11 October 2026. Page: https://xiry.app/resources/animating-height-auto-in-css

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.