How to make chart fit the react-tabs inside React-Grid-Layout?

Hi @danez
Please help. I want put the chart in a tab of a grid. I have successfully put the chart in the grid (React Grid Layout) and the chart size fits the grid, but when i put tab (React-Tab) in a grid and then the chart inside the tab. The chart wont fit anymore. How to solve?

class TvChart extends React.Component {
  render() {
    return (
      <div>
        <Tabs style={this.props.style}>
          <TabList>
            <Tab>Chart</Tab>
            <Tab>Depth</Tab>
          </TabList>
          <TabPanel>
            <Card>
              <TVChartContainer />
            </Card>
          </TabPanel>
          <TabPanel>
            <h5>Depth</h5>
          </TabPanel>
        </Tabs>
      </div>
    );
  }
}

this is the css

.TVChartContainer {
    height: 100%;
    width: 100%;
}

and this is the parent style

const styles = {
  main: {
    backgroundColor: "#ffffff",
    fontSize: "10px",
    height: "inherit"
  },
  orderbook: {
    minHeight: "220px",
    minWidth: "100px"
  },
  ask: {
    width: "50%"
  },
  bid: {
    width: "50%",
    borderRight: "1px solid #151d2b"
  }
};

but this one works, the chart fits the grid completely.

class TvChart extends React.Component {
  render() {
    return (
      <Card style={this.props.style.main}>
        <TVChartContainer />
      </Card>
    );
  }
}

I appreciate if you can help.

Regards,

Ian

No repository file or test is named. Start by reproducing the nested React-Grid-Layout, react-tabs, and TVChartContainer layout from the issue, then inspect how height and width are passed through the tab panels. Done means identifying a repository-level fix or documenting the required sizing behavior with a regression test if the project supports one.