[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.