Set height automatically according to parent's available height

[lbssousa]

I have an InfiniteScroll component inside a CSS Grid cell (typical layout: Header, Main, Aside and Footer), like in screenshot below:

I want to avoid vertical overflow of my grid, so I can still have my fixed footer while getting infinite scroll working. The only way I've found to achieve this is setting the prop height of my InfiniteScroll component.

My question is: how can I get the height of the parent element (in the case of screenshot above, 763px) and set it to height prop of my InfiniteScroll component? Or is there another way to let InfiniteScroll grow automatically to fit its parent height?

[jmbldwn]

Perhaps the outerDiv should inherit display, flexDirection, flexGrow and height so it doesn't assume it's own layout?

[DonAyers]

@jmbldwn - can you expand on this? Some example code might be helpful. I am struggling with the same issue. Just can't get fetching to work properly without explicitly setting the height of the parent div.

[jmbldwn]

I decided to use the material-ui data grid instead, but looking at this, it looks like the outer div has a class name, which could be used to give it some css love to inherit height from it's parent:

      <div
        style={outerDivStyle}
        className="infinite-scroll-component__outerdiv"
      >