Ever since i found out that there's the option to animate height: auto; by using grid-template-rows, i have been using it wherever i see fit, like a menu or FAQ items.
Recently i noticed that the inner element does not slide as fast as the outer element does.
See this fiddle: https://codepen.io/stenpelzer/pen/bGOPrLX.
Why does this happen?
Edit: I found a solution, but it does not answer the why. Please let me know if you have more information.
I finally found a solution for this problem:
You define the align-items rule on the .outer element.
Example: https://codepen.io/Blackxes/pen/BaMKrxO
Dynamic units seem to cause this issue (em, fr, etc.) except % which just jumps to its size
while the .inner grows through the transition.
I assume the fr without align-items on the children doesn't "know" its children's size and calculates the .inner height incorrectly based on .. "something" which results in this odd behaviour.
As soon as you set align-items to something except none it works beautifully.
@note A little none related. The result is the same but the method is far more simple than using grid and the single div.
At the time of me updating this answer, this feature is behind the experimental flag, so using this is possible but definitely not in production. Soon we will be able to transition height by using calc-size(auto) as value for the height property.
So check the progress of this feature if you read this. Maybe its in a stable state.
*Wanted to update this answer before likely forgetting it in the future