The simple trick to transition from height 0 to auto with CSS
Why Stack Overflow recommends it
Stack Overflow users link it as the go-to answer for animating to and from height auto, especially for menus, accordions and details elements.
Recommended by 1 people across 1 different months, 2023 to 2025.
What it is
A short CSS tutorial by Kevin Powell showing how to transition an element from height 0 to auto by animating grid-template-rows from 0fr to 1fr with a wrapper and an overflow-hidden child. It credits Keith J. Grant's article and ends with an accordion example.
What people said
Recommends Bravo · 2025-01 · Stack Overflow · on “Doctype HTML stops smooth div expansion”
Why <!DOCTYPE html> changes this behaviour is unknown to me, perhaps it has to do with quirks mode (is that still a thing?) It's well known that animating heights (widths, etc) from 0 to a non-absolute value (percentage, auto etc) is not possible, however there are two ways (one for all browsers, one for chromium based only) that it can now be done (to height auto at least, not sure about 100%, but I think auto is a better value to use) The current best way (i.e. all modern browsers) is with a little magic from Kevin Powell [this video] You'll want to wrap the <ul class="submenu"> in a <div class="magic"> (I call the class magic as that is where the magic happens) Next, you'll modify your CSS to
Cites Bartek · 2023-08 · Stack Overflow · on “Animating max-height with CSS transitions”
There is a new pure CSS solution that solves all the issues that other CSS solutions had. You can use grid-template-rows: 0fr; for collapsed and 1fr; for expanded. Look at the code for details: /* theme */ .panel-expand { background-color: black; color: white; padding: 20px; width: 400px; transition: all 200ms ease-in-out; } /* mechanism */ .panel-expand { display: grid; grid-template-rows: 0fr; } .panel-expand:hover { grid-template-rows: 1fr; } .panel-expand__content { overflow: hidden; } <div class="panel-expand"> <div class="panel-expand__content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti, sint distinctio deserunt vel unde consequatur sequi nobis necessita
Cites Luca Detomi · 2024-06 · Stack Overflow · on “Transitioning an accordion content with "allow-discrete" value for "display" property”
I have an accordion [LINK] in which content is visually hidden and shown using transitions on grid-template-rows from 0fr to 1fr values. It's inspired by a solution [this video] made by Kevin Powell on its youtube channel. The html code is: <div class="accordion"> <div class="accordion-panel"> <h3 id="panel_heading_vaku" class="accordion-header"><button type="button" aria-expanded="false" aria-controls="panel_content_vaku">Heading</button></h3> <div id="panel_content_vaku" class="accordion-content" aria-hidden="true" aria-labelledby="panel_heading_vaku" role="region"> <div> <div class="details"> <p>lorem ipsum dolor sit amet</p> </div> </div> </div> </div> </div> The key part of the animation tri
Cites herrstrietzel · 2024-07 · Stack Overflow · on “Animate a details tag when closing”
Disclaimer: the described approach also deploys some JavaScript – please bear with me ... // init enhance details enhanceDetails(); function enhanceDetails() { let details = document.querySelectorAll("details"); details.forEach((detail, d) => { // quit if already processed let processed = detail.classList.contains('details') ? true : false; let initialized = detail.classList.contains('details-init') ? true : false; if(processed) return false; /** * all wrap detail's content: * outer wrap for grid display context * and inner for hidden overflow */ let outer = document.createElement("div"); outer.classList.add("details-content"); let inner = document.createElement("div"); inner.classList.add("
Cites Sten Pelzer · 2024-09 · Stack Overflow · on “What causes this delay in a grid-template-rows transition?”
Just found that the top comment under the video where i found this trick also mentions the issue: [this video] @oxuhs-gy4xm: "Make sure to add "grid-row: 1 / span 2;" on the child element. Otherwise the child will animate at a diffrent speed than the parent."