I am currently working on creating an animation for a collapsible box (accordion).
My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the parent should adjust accordingly.
Unfortunately, the animation is not functioning as expected.
Below is a simple reproduction:
export default function Home() {
return (
<main className="flex w-[50vw] p-10 items-center justify-center">
<div className="border-black group border-2 transition-all min-w-5 min-h-5 w-auto h-auto bg-red-300">
<div className="hidden w-20 group-hover:block bg-gray-200">
placeholder
</div>
</div>
</main>
);
}
I found that the animation works if I manually set the size of the parent like so:
export default function Home() {
return (
<main className="flex w-[50vw] p-10 items-center justify-center">
<div className="border-black group border-2 transition-all w-5 h-5 hover:w-10 hover:h-10 bg-red-300">
<div className="hidden w-20 group-hover:block bg-gray-200">
placeholder
</div>
</div>
</main>
);
}
However, I do not want to use hardcoded values for the parent's size as shown in the second version of my code.
Is there a way to make the first version of my code work properly?
Thank you in advance.