fix animating-content-size docs (Added mention of issues and solutions when using “display: flex”)

[joseph0926]

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code.
• Include the URL where we can test the change in the body of your PR.

---

test url: http://localhost:3000/primitives/docs/components/accordion#animating-content-size
modification: radix-ui/primitives#2832 (comment)
modification-mdx-content:

#### Applying Animations in Non-Tailwind CSS Projects

When working with CSS animations outside of Tailwind, it’s important to avoid conflicts with dynamic height calculations, especially in flex layouts. Instead of using height, you can use **max-height** for smoother animations and to prevent double rendering issues. Here’s how you can define the animations using **max-height**:

```css
/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state='open'] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state='closed'] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    __max-height__: 0;
  }
  to {
    __max-height__: var(__--radix-accordion-content-height__);
  }
}

@keyframes slideUp {
  from {
    __max-height__: var(__--radix-accordion-content-height__);
  }
  to {
    __max-height__: 0;
  }
}

Using max-height ensures that the animation doesn’t conflict with the automatic height calculations performed by flex layouts, leading to smoother transitions without layout recalculation issues.

---

This pull request

• Fixes a bug
• Adds additional features/functionality
• Updates documentation or example code
• Other

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
radix-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 8:45am

[joseph0926]

If this is incorrect, please close it