Parent height jumps when transitioning child's height (CSS)-CodePudding

I got a structure similar to this:

<div>
  <div>
    <div>
...

I am trying to transition the inner div's height from 0 to 100%. The transition works, but the parents height does not change smoothly but jumps abruptly before/after the transition (see gif).

All three divs have flex display. The inner div's transition is:

.expandable {
 transition: max-height 2s linear;
 max-height: 0;
 height: auto;
}

.expandable.expanded {
 max-height: 100%;
}

Codepen with a minimum reproducible example: https://codepen.io/raquelhortab/pen/GRxNzGb

CodePudding user response：

While expanding to 100% works for the element's own transition, the parents do not recalculate the height during the transition. However, using an exact value does the trick.

.expandable.expanded {
 max-height: 240px;
}

It is quite an inconvenient solution when you don't know the exact height it will have.

CodePudding user response：

if you want 100% of screen then you should you 100vh

.expandable.expanded {
 max-height: 100vh;
}