I don't see any problems.

Are you aware, that your data looks like: 18, 19, 22 ?

                                    children: [{
                                      title: 'logo18.png',
                                      file: 'png',
                                      children: [{
                                        title: 'logo19.png',
                                        file: 'png',
                                        children: [{
                                          title: 'logo22.png',
                                          file: 'png',
                                        }],
                                      }],
                                    }],

I don't see any problems.

Are you aware, that your data looks like: 18, 19, 22 ?

                                    children: [{
                                      title: 'logo18.png',
                                      file: 'png',
                                      children: [{
                                        title: 'logo19.png',
                                        file: 'png',
                                        children: [{
                                          title: 'logo22.png',
                                          file: 'png',
                                        }],
                                      }],
                                    }],

When you shrink the preview window down to a sufficiently small size, you might spot that; and these data is just some quick examples I threw in😄😄

When you shrink the preview window down to a sufficiently small size, you might spot that; and these data is just some quick examples I threw in😄😄

Same with Indogermane, I didn't saw any issues I also tried resizing the window of the preview on you reproduction playground. Would you be able to provide us a video or image of what you are encountering so we could understand it better?

When you shrink the preview window down to a sufficiently small size, you might spot that; and these data is just some quick examples I threw in😄😄

Same with Indogermane, I didn't saw any issues I also tried resizing the window of the preview on you reproduction playground. Would you be able to provide us a video or image of what you are encountering so we could understand it better?

Thank you for reminding me. Here's how the code renders in my browser:

When scroll all the way to the right, it doesn't seem work properly, is it possible that the problem is attribute to my browser(version 136.0.7103.93)?

Thank you, that helps a lot:

Please try:

.v-list-item__content {
  min-width: max-content;
}

Thank you for the advice, i tried this but it still seems to be the same, did i miss something?
here's the reproduction playground link: reproduction

No, it's OK. I have missed the hover effect issue.

:deep(.v-list-group__items),
:deep(.v-list-item__content) {
  width: max-content;
}

Also, it seems regular width without !important is good enough.

No, it's OK. I have missed the hover effect issue.

:deep(.v-list-group__items),
:deep(.v-list-item__content) {
width: max-content;
}
Also, it seems regular width without !important is good enough.

Thanks a lot @J-Sek , this works fine for me; And thanks for correcting me about !important, i've got it.

min-width: max-content; would actually play better with #append slot, should you add any icon or content to the right.

I am exploring the possibility to include it somehow in the framework. It needs to be behind some prop. Cannot be the default (demo).

maybe expose some prop that can set fixed width for list items?

Switched to min-content and static min-width for the item content.

.v-list-group__items {
  min-width: min-content;
}
.v-list-item__content {
  min-width: 40px;
}

This way the component keeps truncating but does not hide the content completely. No additional prop necessary.

Switched to min-content and static min-width for the item content.

.v-list-group__items {
min-width: min-content;
}
.v-list-item__content {
min-width: 40px;
}
This way the component keeps truncating but does not hide the content completely. No additional prop necessary.

This does help, thanks again for tracking this issue @J-Sek