React-virtualized: AutoSizer calculates incorrect height

[miraage]

Demo

For example, .AppLayout gets height of 724px as .AppLayout__Main does.
But we also have a navbar at the topside which consumes some space from the parent element.
This amount of consumed space should be excluded from the calculated height of the .AppLayout__Main.

[bvaughn]

AutoSizer grows to fill the available space to it. If it grows too large (or doesn't grow enough) this indicates that the style of its parent element need tweaking.

The example you linked to seems to assume that AutoSize will somehow know how to behave within a flex container. It won't. 😄 The docs mention this use case though:

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>

[miraage]

@bvaughn Probably description was not clear from my side.
The problem is related to the first AutoSizer, which is not inside flex container.
There is a fixed-height parent element, which contains two elements: div with a margin and AutoSizer. I have no idea why AutoSizer ignores his sibling element, while it's very easy to calculate remaining height.

[bvaughn]

Sounds like you want AutoSizer to work in a way that HTML/CSS _doesn't_ work.

Your example is basically doing this:

<div style="height: 100%">
  <div style="height: 20px">Top</div>
  <div style="height: 100%">Middle</div>
  <div style="height: 20px">Bottom</div>
</div>

In the above HTML, "Middle" will be 100% of the page height- _not_ 100% less the top and bottom row. If you want that behavior, you'll need to use flex:

<div style="display: flex; flex-direction: column; height: 100%">
  <div style="flex: 0 0 20px">Top</div>
  <div style="flex: 1">Middle</div>
  <div style="flex: 0 0 20px">Bottom</div>
</div>

[miraage]

Thank you for the explanation.