[Collapsible] Component is not calculating the --radix-collapsible-content-height value

[SalahAdDin]

We trying to build a collapsible card using this primitive but we have the following issue:

From our current code, it seems the Collapsible.Root component cannot calculate the final height, but why?

The code is as follows:

export const UpdatedInformationCard = ({
  time,
  title,
  content,
  updatedTime,
  relatedLink,
  // opened,
}: UpdatedInformationCardProps) => {const [open, setOpen] = React.useState(false);
  const t = useTranslations();
  const format = useFormatter();

  return (
    <Collapsible.Root
      asChild
      className={styles.updatedInformationCard}
      open={open} onOpenChange={setOpen}>
      <article>
          <header className={styles.header}>
            <time className={styles.timeStamp}>
              {format.dateTime(time, "time")}
            </time>
            <h3 className={styles.title}>{title}</h3>
        <Collapsible.Trigger><button>close me baby</button>
        </Collapsible.Trigger>
          </header>
        <Collapsible.Content className={styles.content}>
          <main className={styles.body}>
            {<RichTextRender>{content.root.children}</RichTextRender>}
          </main>
          <footer className={styles.footer}>
            <div
              className={clsx(
                styles.extraInfo,
                updatedTime && styles.time,
                relatedLink && styles.link
              )}>
              {updatedTime &&
                `${t("updated-at")} ${format.dateTime(time, "time")}`}
              {relatedLink && (
                <NextLink href={relatedLink} title={t("continue-reading")}>
                  {t("continue-reading")}
                </NextLink>
              )}
            </div>
            <div className={styles.socialMediaSharing}>
              <button>
                <FacebookIcon />
              </button>
              <button>
                <TwitterIcon />
              </button>
              <button>
                <ThreeDotsIcon />
              </button>
            </div>
          </footer>
        </Collapsible.Content>
      </article>
    </Collapsible.Root>
  );
};

.updatedInformationCard {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--size-6);
  align-items: flex-start;

  height: 88px;
  padding: var(--size-7) 7rem var(--size-7) 0;

  font-family: var(--font-noto-serif);
  font-feature-settings:
    "clig"off,
    "liga"off;
  font-style: normal;
  color: var(--ink-12);

  background: var(--sky-2, #f2f7fc);

  /*   transition: width,
  height,
  300ms ease; */

  &[data-opened="false"] {
    animation: slide-up 300ms ease-out;
  }

  &[data-opened="true"] {
    height: 100%;
    animation: slide-down 300ms ease-out;
  }

  .header {
    display: flex;
    flex-direction: column;
    gap: var(--size-5);

    .timeStamp {
      font-family: var(--font-trt);
      font-size: var(--font-size-body);
      font-weight: var(--font-weight-7);

      /* 125% */
      line-height: 20px;
      color: var(--sky-6, #a0a5aa);
      text-transform: uppercase;
      letter-spacing: 2px;

      @media screen and (--sm-n-below) {
        font-size: var(--font-size-small);
      }

      @media screen and (--xl-n-above) and (--xxl-n-below) {
        margin-left: var(--size-4);
      }
    }

    .title {
      max-inline-size: 100%;

      font-family: var(--font-noto-serif);
      font-size: var(--font-size-subheader);
      font-weight: var(--font-weight-7);

      /* 120% */
      line-height: 24px;

      @media screen and (--sm-n-below) {
        font-size: var(--font-size-body);
      }
    }

    @media screen and (--sm-n-above) {
      flex-direction: row;
      gap: var(--size-3);
      align-items: center;
      justify-content: center;
    }

    @media screen and (--xl-n-above) {
      gap: var(--size-5);
    }
  }

  /* styles.css */
  .content {
    overflow: hidden;

    &[data-state='open'] {
      animation: var(--animation-slide-down);
    }

    &[data-state='closed'] {
      animation: var(--animation-slide-up);
    }
  }

  .body {
    display: flex;
    flex-direction: column;
    gap: var(--size-6);
    width: 100%;

    @media screen and (--sm-n-below) {
      gap: var(--size-5);
    }

    @media screen and (--sm-n-above) and (--xl-n-below) {
      width: calc(100% - 4.25rem);
      margin-left: 4.25rem;
    }

    @media screen and (--xl-n-above) and (--xxl-n-below) {
      width: calc(100% - 6rem);
      margin-left: 6rem;
    }

    @media screen and (--xxl-n-above) {
      width: calc(100% - 7rem);
      margin-left: 7rem;
    }
  }

  .footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    .socialMediaSharing {
      display: inline-flex;
      flex-shrink: 0;
      gap: var(--size-3);
      align-items: center;

      height: 40px;

      button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 2.5rem;
        height: 2.5rem;

        border-radius: var(--radius-round);

        svg {
          color: var(--sky-6, #a0a5aa);
        }
      }

      @media screen and (--sm-n-below) {
        justify-content: center;
      }
    }

    .extraInfo {
      font-family: var(--font-trt);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-4);

      /* 142.857% */
      line-height: 20px;
      text-transform: uppercase;
      letter-spacing: 2px;

      &.time {
        color: var(--sky-6, #a0a5aa);
        text-align: right;
      }

      &.link {
        font-weight: var(--font-weight-7);
        color: var(--blue-5);
        text-align: center;
      }

      @media screen and (--sm-n-below) {
        width: 100%;
      }
    }

    @media screen and (--sm-n-below) {
      flex-direction: column;
      gap: var(--size-5);
    }

    @media screen and (--sm-n-above) and (--xl-n-below) {
      width: calc(100% - 4.25rem);
      margin-left: 4.25rem;
    }

    @media screen and (--xl-n-above) and (--xxl-n-below) {
      width: calc(100% - 6rem);
      margin-left: 6rem;
    }

    @media screen and (--xxl-n-above) {
      width: calc(100% - 7rem);
      margin-left: 7rem;
    }
  }

  @media screen and (--sm-n-below) {
    gap: var(--size-5);
    padding: var(--size-4) var(--size-3);
  }

  @media screen and (--sm-n-above) and (--lg-n-below) {
    padding: var(--size-7) var(--size-7) var(--size-7) var(--size-3);
  }

  @media screen and (--lg-n-above) and (--xl-n-below) {
    padding: var(--size-7) 4.75rem var(--size-7) var(--size-2);
  }

  @media screen and (--xl-n-above) and (--xxl-n-below) {
    padding: var(--size-7) 6rem var(--size-7) 0;
  }
}

Thanks for your help!