Flex Removal Impact

[abubakar2029]

import { Fragment, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";

function Example() {
const [open, setOpen] = useState(true);

return (
<>
<button className="text-[32px] font-black" onClick={() => setOpen(true)}>
Aho

<Transition.Root show={open} as={Fragment}>

<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>

</Transition.Child>

{/*

/}

<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<Dialog.Panel className="pointer-events-auto relative bg-blue-500 p-4 w-screen max-w-md">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>

<button
type="button"
className="relative rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
onClick={() => setOpen(false)}
>

Close panel

</Transition.Child>

<Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
Panel title
</Dialog.Title>

{/ Your content /}

</Dialog.Panel>
</Transition.Child>

{/

*/}

</Transition.Root>
</>
);
}
export default Example;

why on removing flex from line:28(div with red background) changes height of it's child i.e. Dialog.Panel(bg-blue-500).
How flex is affecting n it's height.
i never read about such behavior before

[wongjn]

I don't see any <div> elements in your code. Please consider formatting your code properly within a codeblock or replicating the unexpected behavior in Tailwind Play.