[Bug]: The Scroll-area doesn't work with max-height, only with height.

radix-vue / shadcn-vue

Vue port of shadcn-ui

https://www.shadcn-vue.com/

MIT License

4.55k stars 261 forks source link

[Bug]: The Scroll-area doesn't work with max-height, only with height. #593

Closed Grinch3214 closed 3 months ago

Grinch3214 commented 3 months ago

Reproduction

https://stackblitz.com/run?file=src%2FApp.vue

Describe the bug

The Scroll-area doesn't work with max-height, only with height.

Instead of h-72 in the ScrollArea component, use max-h-72.

This is a very useful value that saves you from writing your own code to calculate the height of elements when it's not needed. Screenshot_1

System Info

shadcn-nuxt

Contributes

[ ] I am willing to submit a PR to fix this issue
[ ] I am willing to submit a PR with failing tests

hrynevychroman commented 3 months ago

@Grinch3214 Reproduction don't valid ☺️

sadeghbarati commented 3 months ago

@Grinch3214 Hi you need to set height, it's required for ScrollArea component

https://stackblitz.com/edit/bthdwy?file=src%2FApp.vue

If you look for data-scrollbarimpl element in Devtools, it's outside of data-radix-scroll-area-viewport element so in order to get the corrent height calculation you need to add height to the ScrollArea component