Auto size container height about react-virtuoso HOT 5 CLOSED

Yeah, I figured it out using plain old CSS.
I think the key is to ensure that all parent components have a height assigned right back to #root and then use some flex settings.
I've knocked up a simple code sandbox for you to look at here. The only thing I had to mess around with was the height of the .box bit, as a pure 100% would always leave a few straggling pixels off the bottom so I ended up with a double scroll bar from the window and the Virtuoso component. Fixed that with a 95% or similar on the box, then set the Virtuoso component style to 100% - always fits now, never goes off the bottom of the screen... unless I make the whole thing super small.

Keys are:

1. Make sure everything above has a height set
2. Make the grandparent(?) of the Virtuoso component has a flex type with column
3. Make sure to wrap the Virtuoso component in a div with a flex and height setting
4. Ensure the Virtuoso component has a style applied that sets the height to some %

from react-virtuoso.

Never mind. It can be resolved with pure CSS using flex.

from react-virtuoso.

@fonty422 - I'm struggling with the same thing. Did you apply flex settings (I'm guessing flex-grow) to the Virtuoso component or its parent?

from react-virtuoso.

Except that today, for no known reason just yet, it stopped working in my code. I figured there was something I changed in the main code that messes something up, but no! Even the sandbox above no longer works... at least in Chrome. But Firefox works, so what;s going on there???

from react-virtuoso.

Strangely, the .content style now needs a height in Chrome, which it didn't when I wrote that sandbox code. Very strange

from react-virtuoso.