shadcn-ui
Scrolling Issue with ScrollArea Component When Content Exceeds Parent Size
Hi there,
I've encountered an issue with the ScrollArea component. The problem is that scrolling doesn't work as expected when the child elements' total height exceeds the parent container's height.
Here's a simplified code snippet demonstrating the issue. I used the doc of the combobox and just made the framework array longer, added ScrollArea in the CommandGroup and added max-h-64 to CommandGroup
"use client"
import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
} from "@/components/ui/command"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
let frameworks = [
{
value: "next.js",
label: "Next.js",
},
{
value: "sveltekit",
label: "SvelteKit",
},
{
value: "nuxt.js",
label: "Nuxt.js",
},
{
value: "remix",
label: "Remix",
},
{
value: "astro",
label: "Astro",
},
]
frameworks = [...frameworks, ...frameworks, ...frameworks, ...frameworks]
export default function ComboboxDemo() {
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState("")
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..."}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup className="max-h-64">
<ScrollArea>
{frameworks.map((framework) => (
<CommandItem
key={framework.value}
value={framework.value}
onSelect={(currentValue) => {
setValue(currentValue === value ? "" : currentValue)
setOpen(false)
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
{framework.label}
</CommandItem>
))}
</ScrollArea>
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
)
}
I expected the content to become scrollable when there are more child elements than can fit in the parent container, but that's not happening. Is there a problem with how the ScrollArea component handles overflow, or am I misunderstanding its intended use?
Any insights or suggestions for fixing this would be greatly appreciated. Thanks! 😊
I fixed it by setting a fixed height for the scroll area. In my case the parent had a max height of 96 so i set a the height of the scroll area to 96. Setting a h-full doesn't work either.
