CSS transition not working with max-height: fit-content

Issue

I'm trying to animate some expansible panel with a CSS like this:

.panel {
  transition: max-height 0.1s ease-in-out;
  flex: 90;
  max-height: 26px;

  &.expanded {
    max-height: fit-content;
  }
}

Problem is this transition is not working. If I use some numeric max-height value in .expanded, it works perfect.

Any idea?

I read that fit-content, max-content, ... are not animatable. Is that the case?

Solution

yes fit-content and max-content are not animate your content. you have to provide some numeric value to the max-height for animate. it consider the height required to your content so you have to provide the value of max-height greater then your content height.

Thank you.

Answered By - KuldipKoradia