React-virtualized: AutoSizer height not working correctly with ScrollSync?

[JacobLynch]

Hello,

I took your ScrollSync example and moved the <AutoSizer> up to just before the <ScrollSync>. I enabled both height and width and passed the height down to the children.

After I do that the grids actually end up stretching a bit off the screen. Am I doing something wrong?

Thanks!

[bvaughn]

Hey @Jacob-Lynch. The AutoSizer shouldn't be a direct child of a flex box. This is because the flex spec indicates that containers should _grow to fit_ their largest children. The AutoSizer on the other hand is intended to _grow to fill_ its container. Simplest fix is to put a <div> in between. It will get sized by the flex layout rules and then its child (the AutoSizer) will grow like you want it to.

[bvaughn]

Going to close this issue since it's just discussion and not something that's actionable. We can continue to chat if you have additional questions though.

[JacobLynch]

Thanks for the response!

I actually was doing this

<AutoSizer>
  <ScrollSync>
   ...
  </ScrollSync>
</AutoSizer>

After your response I tried this:

<ScrollSync>
  <div>
    <AutoSizer>
   ...
    </AutoSizer>
  </div>
</ScrollSync>

Now I only see the black header bar and the grid has completely disappeared.

[bvaughn]

Link me to a Plunkr?

[bvaughn]

PS. @Jacob-Lynch You'll need to give your wrapper <div> a size in the direction not managed by flex box. So if your container is a flex column, your wrapper <div> will need to be given an explicit width: 100% style.

[JacobLynch]

@bvaughn Thank you for your tips, they helped me reach something that seems to be working. I will set up a Plunkr if I run into more issues, but I found a possible solution that seems to do what I want.

I went with

<ScrollSync>
  <AutoSizer>
    ...
  </AutoSizer>
</ScrollSync>

And then I subtracted the rowHeight from the left column grid height as well as the right grid and containing div. Doing that rendered the grids appropriately on my page. I'm not sure if this is specific to my markup or not but posting it here in the chance that it may give someone else an idea.

Thanks again @bvaughn!