[BUG] Items get calculated incorrectly when child of flex parent

Describe the bug This may be a bug, or it may be incorrect usage. I am using Virtuoso inside a Material UI Popover, and placing it inside a flex container so it takes up the remaining portion of the popover after some content (see codesandbox link). My understanding is I should be able to have a structure like this:

<div style={{
   display: 'flex',
   flexDirection: 'column',
   height: '100%'
  }}
>
  <div> {'some content of unknown or variable height'}</div>
  <div style={{flex: 1}}>
      <Virtuoso height={'100%'} .../>
  </div>
</div>

And it seems this works just fine when this is just in the regular DOM, as shown in the codesandbox here. But when I put it in a Popover with this same sort of structure, it doesn’t seem to be able to calculate the right number of items to show, and you’ll notice when scrolling to the bottom of the list there’s a gap and not all of them render.

Reproduction https://codesandbox.io/s/vigilant-rgb-xugwm?file=/src/components/App.js

To Reproduce Steps to reproduce the behavior:

1. Go to the codesandbox
2. Click the Expand button
3. Scroll the list down

Expected behavior Should render all items with no gap at the bottom

Desktop (please complete the following information):

• OS: [e.g. iOS] - macOS Big Sur
• Browser [e.g. chrome, safari] - Chrome

[genepaul]

@petyosi, I determined what the issue is. It appears to be due to the fact that the Material UI Popover animates a transition when it enters. The Virtuoso tries to grab dimensions while the Popover is transitioning and gets incorrect information. If I defer the rendering of the Virtuoso until the Popover has fully entered, the Virtuoso works correctly. So this is not an issue with Virtuoso. I just wanted to add the update here for anyone else who happens upon this issue and wonders what the problem was. If I come up with working code I’ll try to update with a codesandbox. I did a really dirty hack in my testing where I just did a setTimeout in a useEffect and that proved the issue. I think there’s probably a better way to do it though. Thanks for creating such an awesome library!

[genepaul]

I’m fairly certain it’s padding. I tried to clear margins.