[bug]: `CarouselContent` should be `overflow-hidden w-full h-full` not `overflow-hidden`

[softmarshmallow]

Describe the bug

In a scenario where carousel size is determined by the container, not the content (item) passing

<CarouselContent className="w-full h-full">

won't work since the className is accepted by the second child

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})

I am trying to use carousel in a definitive grid, and grid area, where content should follow the sizing, as the size is overriden (ignored by CarouselContent, I think its a wrong design. (or at least make it more atomic or allow className separation)

Affected component/components

Carousel

How to reproduce

<CarouselContent className="w-full h-full">

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

MacOS

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[shawninder]

If you don't want to modify your local copy of the component code, you can use TailwindCSS's * variant to style tags not affected by the className prop exposed by unaltered shadcn components.

In your case @softmarshmallow it looks like you would need to do something like this:

<div className="*:w-full *:h-full">
  <CarouselContent>
</div>

The immediate children of the div should be the top-level div in the Carousel component which you are trying to style.

[shadcn]

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)

[shadcn]

This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)