Container height based on number of items to display

[simplecommerce]

Hi,

I have a specific use case scenario.

I want to render a list that displays an X number of items.
That list should have a max height based on the max number of items to display.
If there are less items to display, the height should be the max of the number of items displayed.

Is there any way to do achieve this without specifying a fixed height?

So my list would expand to the maximum number of items I want to display at a time, say 10.
But if there are only 5 items, I want it to shink so it won't take up space.

I don't know if this is feasible or not.
I have tried multiple configurations and looked at examples and in my case I always have to specify a height.

Hope anyone can help, thanks!

[ppayerl]

Hello,

I have the same requirement:
a list that only takes up as much space as needed to render a small number of items
but support endless scrolling as soon as the number of items grows (or some max-height in px is reached).

I'm thankful for any input if and how this can be achieved.

[lexahall]

I have the same requirement as @ppayerl. I am building a chat and would like for my chat messages to show up nearest to the input first, then fill the screen. So if there are only a few messages, they will show up at the bottom of the screen, but if there are many messages, the chat window will be filled.

There are two ways that this could be accomplished:

1. to set display:flex, flexDirection: column, justify-content: flex-end on the actual virtuoso list div (but we do not have acess to directly style this element) or to have the entire list change height based on the number of messages it contains, then position the entire component at the flex-end of it's container. This seems impossible since there are multiple inner divs set with height: 100%, so I cannot use height: fit-content.

@petyosi - do you have any idea how this could be accomplished?

[petyosi]

https://virtuoso.dev/virtuoso-api-reference/

Check the first property.

[lexahall]

Ah thanks, I don't know how I missed this! Perfect

[nelsieborja]

We also need this feature for our dropdown in our DS library. Currently, I'm using this workaround.

[NiklasPor]

The shrinking is also the default behaviour from tanstack/virtual. Developer experience wise I'd also much prefer this.