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

未指定 repository 文件或测试。首先复现 issue 中的 React-Grid-Layout、react-tabs 和 TVChartContainer 嵌套布局，然后检查高度和宽度如何通过标签页面板传递。如果项目支持回归测试，则在确定 repository 级别的修复方案，或使用回归测试记录所需的尺寸行为后，即可视为完成。

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