Autosizer making a div of height and width 0

Question

My configuration goes as follows:

// Calling it
<div style={{ width: 1000, height: 800 }}>
  <MyComponent />
</div>

// MyComponent.js
<InfiniteLoader { ...itsProps }>
  {({ onRowsRendered }) => (

    <AutoSizer>
      {({ width, height }) => (

      <Table
        width={ width }
        width={ height }
        ...

The problem is that this is what is being rendered:

<div style="overflow: visible; height: 0px; width: 0px;">
  <div class="ReactVirtualized__Table" role="grid">
    ...

So nothing is seen in the screen.

Maybe I misunderstood Autosizer usage, so I set it up to adjust itself to the parent's width/height.

What am I missing?

can you provide more from output html – Serguzest Mar 09 '18 at 23:16 — Serguzest, Mar 09 '18 at 23:16

score 8 · Answer 1 · answered Mar 10 '18 at 00:57

The height: 0 style in the snippet of HTML you shared isn't actually a problem, because of the overflow: visible style. This is the way AutoSizer is meant to work.

I suggest you read the "Using AutoSizer" docs page. I suspect your problem is similar to one of the common issues mentioned there:

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.)

Autosizer making a div of height and width 0

1 Answers1