不定高度的过渡动画

方法1 

max-height，效果一般

方法2

clip-path：inset，支持transition

.content {
    ...
    height: auto;
    clip-path: inset(0 0 100% 0);
}
 .fold:hover .content {
    clip-path: inset(0);
}

方法3

grid布局中的fr，支持transition，但是需额外套一层容器，兼容chrome(107+), safari(16+)

.grid{
  display: grid;
  grid-template-rows: 0fr;
  transition: .3s;
  overflow: hidden; /*防止文字溢出*/
}
.grid>div{
  min-height: 0; /*防止文字撑开容器*/
}
.wrap:hover .grid{
  grid-template-rows: 1fr;
}

出处：

纯css height auto支持过渡折叠动画

css如何让auto height完美支持过渡动画