(I have an awkward sentence using the translator)

The problem seems to be a conflict between automatically calculating heights in flex and in radix.

const rect = node.getBoundingClientRect();
heightRef.current = rect.height;
widthRef.current = rect.width;

As you can see from the code above, we are dynamically calculating the height inside the radix

However, the flex layout automatically calculates and places the height dynamically based on the size of the child elements. Therefore, the dynamically calculated height in Radix and the automatically calculated height in flex layout will conflict with each other, resulting in the height being calculated twice and animated twice as a result

So, the solution is as follows

const slideDown = keyframes({
  from: { maxHeight: 0 },
  to: { maxHeight: "var(--radix-accordion-content-height)" },
});

const slideUp = keyframes({
  from: { maxHeight: "var(--radix-accordion-content-height)" },
  to: { maxHeight: 0 },
});

max-height(maxHeight) seems to solve the problem

max-height doesn't conflict with the automatic height calculation of flex layouts because the browser doesn't need to dynamically calculate the size during animation.
The height attribute is used to animate the exact height, but it is prone to conflicts because dynamic values like auto are not supported.
On the other hand, max-height is calculated with a fixed value, so it animates smoothly without conflicts.

Of course, I've only tested a very small part of this, so I'd love to hear back from the “radix” team

I am struggling with the same bug @joseph0926! It also is affected with display: grid. Thanks for posting a solution. I will keep watching. Am also happy to contribute if needed. Thanks.