React-window: Autosizer does not work with react-window

The auto sizer component _definitely_ works with this library. Check out the FAQs:
https://github.com/bvaughn/react-window#can-a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

Sorry you haven't gotten much of a response from Stack Overflow, but I think that's still the right place to go for this sort of question (assuming you've read the FAQs first :wink:)

As you said that it definitely works, can you pls guide me why it is not working for me?

I have already read the FAQs, but the problem is height and width is zero due to which no image is displayed on the page unless I use window.innerHeigth/Width. I have pasted my code on SO and I don't know what's wrong with it because docs are not helping much.
I hope you understood my question well. Pls let me know for more clarification.

Running in the same issue here. I absolutely doe not get it to work. Changing the code for debugging:

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

when I use AutoSizer from the dedicated package (import AutoSizer from "react-virtualized-auto-sizer";) I get no output.

When I use it from react-virtualized (import {AutoSizer} from 'react-virtualized') I get the outputs: 0 0 and 0 1806

Completely blows my mind why it doesn't work (the codesandbox example works on the same browser)

Running in the same issue here. I absolutely doe not get it to work. Changing the code for debugging:

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

when I use AutoSizer from the dedicated package (import AutoSizer from "react-virtualized-auto-sizer";) I get no output.

When I use it from react-virtualized (import {AutoSizer} from 'react-virtualized') I get the outputs: 0 0 and 0 1806

Completely blows my mind why it doesn't work (the codesandbox example works on the same browser)

the same issue! have you found solution?

Also getting the exact same issue. Switching to the version included in react-virtualized fixes the issue, but I'd also prefer to use it standalone w/ react-window.

I'm having the same issue here.

I was able to get <AutoSizer /> from the dedicated package working with react-window until I tried to use the ref on <List />. It would not set the ref correctly, so I had to switch back to using the AutoSizer from react-virtualized.

so in the source code it looks like if there is no calculated width on the element, it just simply doesn't render the children. i still have to play with the actual implementation, but it seems like as long as my container has a size (whether fixed or using flex or something), it will render the output

hope that helps others

I am having the same issue using TypeScript.

export 'AutoSizer' was not found in 'react-virtualized-auto-sizer'

EDIT: Found a fix.

The @types/react-virtualized-auto-sizer package does not explicitly define an AutoSizer component.

Instead, it exports the following as a default class:
export default class extends React.Component<AutoSizerProps> {}

You can import this as AutoSizerlike so:
import AutoSizer from 'react-virtualized-auto-sizer';

I had the same problem with height being 0, and it turned out that its parent(s) need to have a fixed size in order for it to work.
IMO this 'feature' completely removes the need for AutoSizer, as I may as well just not use it and give the child a fixed size, the effect is the same.

From the docs
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

It would be great if we could pass a prop to override this behaviour and have the AutoSizer stretch the parent to its size.

Having same problem as well.

I was able to get <AutoSizer /> from the dedicated package working with react-window until I tried to use the ref on <List />. It would not set the ref correctly, so I had to switch back to using the AutoSizer from react-virtualized.

I am having the same issue how do you fix it?

I am having the same issue how do you fix it?

I'm using the standard <AutoSizer /> again

import { AutoSizer } from 'react-virtualized'

Same issue for me. AutoSizer sets height as 0 when using with react window. I am also using AutoSizer from react virtualized with react-window.

original docs

Can I use AutoSizer within a flex container?

When using an AutoSizer as a direct child of a flex box it usually works out best to wrap it with a div, like so:

<div style={{ display: 'flex' }}>
  <!-- Other children... -->
  <div style={{ flex: '1 1 auto' }}>
    <AutoSizer>
      {({ height, width }) => (
        <Component
          width={width}
          height={height}
          {...props}
        />
      )}
    </AutoSizer>
  </div>
</div>

I struggled with the same errors as you guys, and after a while, I managed to make it work.
It happens that you need to set the height and width of the outer container. Otherwise, it will not render children.
Check this example https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js:277-312