Dynamically increase table height to fill screen size

[somguyth]

Is this possible to dynamically increase table height, based on the browser window height, when using the virtualized react-table (example that I'm working with) ?

There's lots of empty space in my browser that I wish it'll fill up, yet I don't wish the table to overflow my screen, only to go up to the end of it (with a scrollbar allowing access to the remaining rows, if any).

I tried to use this flex box css code, but it didn't do anything. Note that I've successfully used this css code for a different component and it worked.

.flexbox-container {
  display:  flex;
  height:  100vh;
  flex-direction:  column;
}


.test1 {
  display: flex;
  flex-grow:  1;
}

I can see that the react-table example relies on FixedSizeList which seems to fix the height, which perhaps is disabling the flex box? I've tried to remove all the optional props but it didn't work.

<FixedSizeList
  height={800}
  itemCount={rows.length}
  itemSize={35}
  width={totalColumnsWidth+scrollBarSize}
>
  {RenderRow}
</FixedSizeList>